Sam的程式筆記

<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>