Adding preview for the direct image links

css/style.css

@@ -951,6 +951,16 @@ button.disabled:hover
     display: none;
     padding: 5px 5px 0 5px;
 }
+.image-preview
+{
+    max-height: 500px;
+    width: auto;
+}
+.preview-container
+{
+    max-height: 500px;
+    width: 100%;
+}
 .post-stats
 {
     margin: 0 10px 0 55px;

home.html

@@ -244,6 +244,8 @@
                         <!-- use "avatar-row-template" here -->
                     </li>
                 </ul>
+                <div class="preview-container">
+                </div>
                 <div class="post-reply-content" style="display: block;">
                     <form class="post-area-new">
                         <textarea placeholder="Reply..."></textarea>

js/interface_common.js

@@ -307,7 +307,17 @@ var postExpandFunction = function( e, postLi )
         originalLi.append(originalPost);
 
         $postExpandedContent.slideDown( "fast" );
-
+        
+        var previewContainer=$postExpandedContent.find(".preview-container")[0];
+        /* was the preview added before... */
+        if ($(previewContainer).children().length == 0)
+        {
+            var link = originalPost.find("a[rel='nofollow']");
+            if (/(\.jpg)|(\.gif)|(\.png)|(\.jpeg)/.test(link.html().toLowerCase()))
+            {
+                $(previewContainer).append($("<img src='" + link.html() + "' class='image-preview' />"));
+            }
+        }
         // insert "reply_to" before
         requestRepliedBefore(originalLi);
         // insert replies to this post after