over 2 years ago

從網站下載新版本Lazy Load Plugin for jQuery
範例中還有使用jQuery BlockUI Plugin來做一個燈箱效果

<img class="lazy" src="img/grey.gif" data-original="./picCustom.do?act=showImage&picturesid=${data.picturesid}"  width="150">

<script>
$(function() {
    $("img.lazy").click(function() {
            $('#displayBox').attr('src',$(this).attr('data-original'));

            var theImage = new Image();
            theImage.src = $(this).attr('data-original');
            //取得影像實際的長寬

            var imageWidth = theImage.width;
            var imageHeight = theImage.height;

            //計算縮放比例

            var w=$(window).width()/imageWidth;
            var h=$(window).height()/imageHeight;
            var pre=1;
            if(w>h){
                pre=h;
            }else{
                pre=w;
            }
            //設定目前的縮放比例

            var imageWidthPre = imageWidth*pre;
            var imageHeightPre = imageHeight*pre;
            //設定目前的縮放比例

            $('#displayBox').width(imageWidthPre);
            $('#displayBox').height(imageHeightPre);
            
            $.blockUI({
                message: $('#displayBox'),
                css: {
                    top:  ($(window).height() - imageHeightPre) /2 + 'px',
                    left: ($(window).width() - imageWidthPre) /2 + 'px',
                    width: imageWidthPre+'px'
                }
            });
             $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
        });
});
</script>
← Java 操作Zip壓縮 在CentOS上安裝MariaDB →
 
comments powered by Disqus