Showing zoom link only on mouse over and some minor changes

(ActionItem1801)

Showing zoom link only on mouse over and some minor changes
(ActionItem1801)
Caio Almeida · Daniela Feitosa
1 parent a125dc04
Showing 2 changed files with 21 additions and 10 deletions Show diff stats
app/helpers/application_helper.rb
public/stylesheets/application.css
@@ -1195,16 +1195,18 @@ module ApplicationHelper
       stylesheet_link_tag('fancybox') +
       javascript_include_tag('jquery.fancybox-1.3.4.pack') +
       javascript_tag("jQuery(function($) {
-        $('#article .article-body img').each( function(index) {
-          var original = original_image_dimensions($(this).attr('src'));
-          if ($(this).width() < original['width'] || $(this).height() < original['height']) {
-            $(this).wrap('<div class=\"zoomable-image\" />');
-            $(this).parent('.zoomable-image').attr('style', $(this).attr('style'));
-            $(this).attr('style', '');
-            $(this).after(\'<a href=\"' + $(this).attr('src') + '\" class=\"zoomify-image\"><span class=\"zoomify-text\">%s</span></a>');
-          }
+        $(window).load( function() {
+          $('#article .article-body img').each( function(index) {
+            var original = original_image_dimensions($(this).attr('src'));
+            if ($(this).width() < original['width'] || $(this).height() < original['height']) {
+              $(this).wrap('<div class=\"zoomable-image\" />');
+              $(this).parent('.zoomable-image').attr('style', $(this).attr('style'));
+              $(this).attr('style', '');
+              $(this).after(\'<a href=\"' + $(this).attr('src') + '\" class=\"zoomify-image\"><span class=\"zoomify-text\">%s</span></a>');
+            }
+          });
+          $('.zoomify-image').fancybox();
         });
-        $('.zoomify-image').fancybox();
       });" % _('Zoom in'))
     end
   end
@@ -1015,6 +1015,11 @@ code input {
   display: inline-block;
 }
+/* IE 8 hack to avoid max-width image bug */
+.msie8 #content #article .article-body .zoomable-image img {
+  max-width: none !important;
+}
+
 /* IE 7 hack to simulate inline-block */
 .msie7 .zoomable-image {
   zoom: 1;
@@ -1025,7 +1030,7 @@ code input {
   position: absolute;
   left: 0;
   top: 0;
-  display: block;
+  display: none;
   width: 100%;
   height: 16px;
   text-align: left;
@@ -1033,6 +1038,10 @@ code input {
   border-bottom: 1px solid #333;
 }
+.zoomable-image:hover .zoomify-image {
+  display: block;
+}
+
 #article .zoomify-image {
   text-decoration: none;
   color: #fff;