fixed image resizing

app/assets/javascripts/posts.js

@@ -6,6 +6,34 @@
   Danbooru.Post.initialize_all = function() {
     this.initialize_post_sections();
     this.initialize_wiki_page_excerpt();
+    this.initialize_post_image_resize_links();
+  }
+  
+  Danbooru.Post.initialize_post_image_resize_links = function() {
+    $("#medium-file-link").click(function(e) {
+      var $link = $(e.target);
+      var $image = $("#image");
+      $image.attr("src", $link.attr("href"));
+      $image.width($image.data("medium-width"));
+      $image.height($image.data("medium-height"));
+      e.preventDefault();
+    });
+    $("#large-file-link").click(function(e) {
+      var $link = $(e.target);
+      var $image = $("#image");
+      $image.attr("src", $link.attr("href"));
+      $image.width($image.data("large-width"));
+      $image.height($image.data("large-height"));
+      e.preventDefault();
+    });
+    $("#original-file-link").click(function(e) {
+      var $link = $(e.target);
+      var $image = $("#image");
+      $image.attr("src", $link.attr("href"));
+      $image.width($image.data("original-width"));
+      $image.height($image.data("original-height"));
+      e.preventDefault();
+    });
   }
   
   Danbooru.Post.initialize_wiki_page_excerpt = function() {

app/assets/stylesheets/application.css.scss

@@ -348,7 +348,7 @@ div#page {
     width: 75%;
     float: left;
     margin-left: 2em;
-    overflow: hidden;
+    overflow: visible;
   }
 }
 
@@ -359,7 +359,7 @@ div.clearfix {
 
 /*** Post previews ***/
 div.post-previews {
-  overflow: hidden;
+  overflow: visible;
 }
 
 

app/helpers/posts_helper.rb

@@ -2,15 +2,22 @@ module PostsHelper
   def resize_image_links(post, user)
     links = []
 
-    links << %{<a href="#" data-src="#{post.file_url}" data-width="#{post.image_width}" data-height="#{post.image_height}">Original</a>} if post.has_medium? || post.has_large?
+    if post.has_medium?
-    links << %{<a href="#" data-src="#{post.medium_file_url}" data-width="#{post.medium_image_width}" data-height="#{post.medium_image_height}">Medium</a>} if post.has_medium?
+      links << link_to("M", post.medium_file_url, :id => "medium-file-link")
-    links << %{<a href="#" data-src="#{post.large_file_url}" data-width="#{post.large_image_width}" data-height="#{post.large_image_height}">Large</a>} if post.has_large?
+    end
+    
+    if post.has_large?
+      links << link_to("L", post.large_file_url, :id => "large-file-link")
+    end
+    
+    if post.has_medium? || post.has_large?
+      links << link_to("O", post.file_url, :id => "original-file-link")
+    end
     
     if links.any?
-      html = %{<li id="resize-link"><a href="#">Resize</a></li><ul id="resize-links">} + links.map {|x| %{<li>#{x}</li>}}.join("") + %{</ul>}
+      content_tag("span", raw("Resize: " + links.join(" ")))
-      html.html_safe
     else
-      ""
+      nil
     end
   end
 end

app/views/posts/partials/show/_image.html.erb

@@ -1 +1 @@
-<%= image_tag(post.file_url_for(CurrentUser.user), :alt => post.tag_string, :width => post.image_width_for(CurrentUser.user), :height => post.image_height_for(CurrentUser.user), :id => "image", "data-width" => post.image_width, "data-height" => post.image_height) %>
+<%= image_tag(post.file_url_for(CurrentUser.user), :width => post.image_width_for(CurrentUser.user), :height => post.image_height_for(CurrentUser.user), :id => "image", "data-original-width" => post.image_width, "data-original-height" => post.image_height, "data-medium-width" => post.medium_image_width, "data-medium-height" => post.medium_image_height, "data-large-width" => post.large_image_width, "data-large-height" => post.large_image_height) %>