lightbox自定义图片大小的实现

lightbox的功能非常强大，但是lightbox有个很不人性话的地方就是不能自定义弹出层图片的大小（也许是我自己不会用吧）

切入正题

打开lightbox.js

设定两个变量

var lbxMaxWidth = 600;//弹出层最大宽度，
var lbxMaxHeight = 500;//弹出层最大高度

注：这两个变量可以自己随意设定，只要在lightbox脚本中可以读取到这两个变量就可以，下文会利用这两个大小来定义弹出层图片的大小。

找到这段话

 preloader.onload = function() {
        $image.attr('src', _this.album[imageNumber].link);
        $image.width = preloader.width;
        $image.height = preloader.height;
        return _this.sizeContainer(preloader.width, preloader.height);//这个是设定边框的大小
      };

修改成

 preloader.onload = function () {         

        $image.attr('src', _this.album[imageNumber].link);

              //preloader.width是图片的实际大小

                if (preloader.width > lbxMaxWidth)

　　　　    {  

                   preloader.height = (lbxMaxWidth / preloader.width) * preloader.height;  

                   preloader.width = lbxMaxWidth;  

               }   

              if (preloader.height > lbxMaxHeight) {

                    preloader.width = (lbxMaxHeight / preloader.height) * preloader.width;

                    preloader.height = lbxMaxHeight;

                }      

//上面这两个if是根据设置的宽度和高度等比例的缩放图片大小          

               $image.attr('width', preloader.width + 'px');//给img标签加宽度属性

                $image.attr('height', preloader.height + 'px');  //给img标签加高度属性

//设定边框的大小            

                return _this.sizeContainer(preloader.width, preloader.height);

            };

接下来还有一步：

打开lightbox.css 找到

#lightbox img {
  width: auto;
  height: auto;
}

这这一段去掉，否则图片还是会维持原来的大小

到此大功告成效果可点击  京深海鲜加工旗舰店