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;
}
这这一段去掉，否则图片还是会维持原来的大小
到此大功告成效果可点击 京深海鲜加工旗舰店
