LightBox 修改图片的缩放功能。

使用http://lokeshdhakar.com/projects/lightbox2/ 的lightBox做图片的幻灯片效果是,如果图片很大,那么显示时会按照图片的原大小显示,现在修改下,当图片大于指定的宽度或高度,进行缩放。

下面为修改的代码:

第一、在开头的函数体内增加2个常量的声明:

(function() {
  var $, Lightbox, LightboxOptions;

/*****增加部分*****/
  var maxWidth = 800;
  var maxHeight = 600;

第二、修改方法changeImage,将方法内的 preloader.onload = function() {}的函数体做如下的修改(红色为修改部分)

preloader.onload = function() {
        $image.attr('src', _this.album[imageNumber].link);
       
        if(preloader.width>maxWidth||preloader.height>maxHeight){
            if (preloader.width > 0 && preloader.height > 0) {
                if (preloader.width / preloader.height >= maxWidth / maxHeight) {
                    if (preloader.width > maxWidth) {
                        $image.width(maxWidth);
                        $image.height((preloader.height * maxWidth) / preloader.width);
                    } else {
                        $image.width(preloader.width);
                        $image.height(preloader.height);
                    }
                } else {
                    if (preloader.height > maxHeight) {
                        $image.height(maxHeight);
                        $image.width( (preloader.width * maxHeight) / preloader.height);
                    } else {
                        $image.width(preloader.width);
                        $image.height(preloader.height);
                    }
                }
                
                return _this.sizeContainer($image.width(), $image.height());
            }
        }
        $image.width(preloader.width);
        $image.height(preloader.height);
        return _this.sizeContainer(preloader.width, preloader.height);

      };


本修改基于http://lokeshdhakar.com/projects/lightbox2/  的v2.51版进行。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值