developers
/
orbit-basic
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ray's changes, put the js for upload image component in a separate file

This commit is contained in:
Christophe Vilayphiou 2012-04-24 12:15:32 +08:00
parent b80339d704
commit 42aeaead93
2 changed files with 27 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/javascripts/inc/jquery.imagesloaded.js
View File

@ -109,4 +109,29 @@ $.fn.imagesLoaded = function( callback ) {
return deferred ? deferred.promise( $this ) : $this; return deferred ? deferred.promise( $this ) : $this;
}; };
})(jQuery); })(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);
});
});
});
});

26
app/views/admin/ad_images/_form.html.erb
View File

@ -78,31 +78,7 @@
<div class="control-group"> <div class="control-group">
<div class="upload-picture"> <div class="upload-picture">
<!--請程式務必將圖片尺寸加入到行內裡--> <!--請程式務必將圖片尺寸加入到行內裡-->
<%= image_tag @ad_image.file,:width=> "456",:height=>'700' rescue ''%> <%= image_tag @ad_image.file rescue ''%>
<script type="text/javascript">
$('.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);
});
});
});
</script>
</div> </div>
<span class="alert widgetInfo">此區塊圖片尺寸請使用580px × 225px</span> <span class="alert widgetInfo">此區塊圖片尺寸請使用580px × 225px</span>
<div class="controls file-upload input-prepend"> <div class="controls file-upload input-prepend">