【Lightbox2】表示画像のサイズをブラウザに合わせて自動化する HTML 知識Z(ゼータ)

トップページHTML >【Lightbox2】表示画像のサイズをブラウザに合わせて自動化する

【Lightbox2】表示画像のサイズをブラウザに合わせて自動化する

Date:2012/09/25
Category: HTML


キレイで便利な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.

コメント

名無しのwebデザイナー 2013/07/31 wrote:

lightbox ver2.51でも対応できました。
知識Zさんに感謝感激雨あられ!!
ありがとうございました!!

ステキ☆

コメントする




次項 商用フリー、さらに著作権表示削除OKのメールフォーム
前項 【IE】画像(imgタグ)のwidthやheightを空指定すると非表示される

知識Z(ゼータ)トップへ
モッピー | お金がたまるポイントサイト
About Us

知識Z(ゼータ)は違法性のあるコンテンツ、不適切な表現の含まれるコンテンツを一切を排除した安心安全な総合優良コンテンツサイトを目指しています。細心の注意を払っておりますが、万が一、不適切なコンテンツ等がございましたら、ご一報ください。ご意見・ご連絡

当サイトは、月額1,050円で高機能・安心レンタルサーバーの【XSERVER(エックスサーバー) 】にて運営させていただいております。いつも大変ありがとうございます。

Calendar
<   2012-09   >
      1
2345678
9101112131415
16171819202122
23242526272829
30      

Amazon.co.jp
What's New
タグ
オンラインデータ
訪問者数:0 人
投稿記事数:286 件
19709529