【Lightbox2】表示画像のサイズをブラウザに合わせて自動化する
キレイで便利なlightbox2ですが、画像そのものが大きいとブラウザをはみ出てしまうのが盲点でした。
http://lokeshdhakar.com/projects/lightbox2/
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;*/
}
に変更します。これでブラウザのサイズに合わせて画像を縮小してくれるようになります。
【Lightbox2】 表示画像のサイズをブラウザに合わせて自動化する の関連記事
No related items.
コメント
コメントする
次項 商用フリー、さらに著作権表示削除OKのメールフォーム
前項 【IE】画像（imgタグ）のwidthやheightを空指定すると非表示される
▲知識Ｚ（ゼータ）トップへ
】にて運営させていただいております。いつも大変ありがとうございます。
名無しのwebデザイナー 2013/07/31 wrote:
知識Zさんに感謝感激雨あられ！！
ありがとうございました！！
ステキ☆