使lightbox2 的彈出的大圖片自動適應螢幕大小
阿新 • • 發佈:2019-01-06
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;*/
}
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:
width: auto;
height: auto;
}
改為:
#lightbox img {
/*width: auto;
height: auto;*/
}