1. 程式人生 > >使lightbox2 的彈出的大圖片自動適應螢幕大小

使lightbox2 的彈出的大圖片自動適應螢幕大小

  Resize the image to the screen:

lightbox.js:

preloader.onload = function() {
$image.attr('src', _this.album[_this.currentImageIndex].link);
$image.width = preloader.width;
$image.height = preloader.height;
return _this.sizeContainer(preloader.width, preloader.height);
};
改為:
preloader.onload = function() {
$image.attr('src', _this.album[_this.currentImageIndex].link);
if (preloader.width > window.innerWidth * 0.9) {
preloader.height = (window.innerWidth * 0.9 * preloader.height) / preloader.width;
preloader.width = window.innerWidth * 0.9;
}

if (preloader.height > window.innerHeight * 0.8) {
preloader.width = (window.innerHeight * 0.8 * preloader.width) / preloader.height;
preloader.height = window.innerHeight * 0.8;
}
$image.width = preloader.width;
$image.height = preloader.height;
$image.attr('width', preloader.width + "px");
return _this.sizeContainer(preloader.width, preloader.height);
};

ligthbox.css:

#lightbox
img {
width: auto;
height: auto;
}
改為:
#lightbox img {
/*width: auto;
height: auto;*/
}