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

這這一段去掉，否則圖片還是會維持原來的大小

到此大功告成效果可點擊? 京深海鮮加工旗艦店

轉載于:https://www.cnblogs.com/tutuzhang/archive/2012/06/05/2536515.html

總結

以上是生活随笔為你收集整理的lightbox自定义图片大小的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。