【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.
コメント
コメントする
次項 【EC-CUBE】facebookのいいね！ボタンの簡易設置
前項 【EC-CUBEペイメント】ヘッダー・・フッターが非表示でレイアウトが崩れる
▲知識Ｚ（ゼータ）トップへ
】にて運営させていただいております。いつも大変ありがとうございます。
名無しのwebデザイナー 2013/07/31 wrote:
知識Zさんに感謝感激雨あられ！！
ありがとうございました！！
ステキ☆