diff --git a/app/assets/javascripts/inc/jquery.imagesloaded.js b/app/assets/javascripts/inc/jquery.imagesloaded.js index a488974d..5b35bb9c 100644 --- a/app/assets/javascripts/inc/jquery.imagesloaded.js +++ b/app/assets/javascripts/inc/jquery.imagesloaded.js @@ -109,4 +109,29 @@ $.fn.imagesLoaded = function( callback ) { return deferred ? deferred.promise( $this ) : $this; }; -})(jQuery); \ No newline at end of file +})(jQuery); + +$(document).ready(function() { + $('.upload-picture').find('img').imagesLoaded(function(){ + var picH = $('.upload-picture').width()/$('.upload-picture').find('img').width()*$('.upload-picture').find('img').height(); + var imgMarginTop = ($('.upload-picture').height()-picH)/2; + var d = $('.upload-picture').height(); + if(imgMarginTop>0){ + imgMarginTop = 0; + d = picH; + $('.upload-picture').css({height:d}) + } + $('.upload-picture').find('img').css({marginTop:imgMarginTop}) + $('.upload-picture').each(function (i){ + $(this).mouseenter(function(){ + var h= picH; + $(this).stop().animate({height:h}, 500); + $(this).find('img').stop().animate({marginTop:0}, 500); + }); + $(this).mouseleave(function(){ + $(this).stop().animate({height:d}, 500); + $(this).find('img').stop().animate({marginTop:imgMarginTop}, 500); + }); + }); + }); +}); \ No newline at end of file diff --git a/app/views/admin/ad_images/_form.html.erb b/app/views/admin/ad_images/_form.html.erb index d38a86a6..e9d60374 100644 --- a/app/views/admin/ad_images/_form.html.erb +++ b/app/views/admin/ad_images/_form.html.erb @@ -78,31 +78,7 @@
- <%= image_tag @ad_image.file,:width=> "456",:height=>'700' rescue ''%> - + <%= image_tag @ad_image.file rescue ''%>
此區塊圖片尺寸請使用580px × 225px