Lightboxをカスタマイズ
画像のモーダル表示で便利なLightboxですが、デフォルトではウィンドウサイズの幅または高さに合わせて画像サイズが決定します。
これはこれで便利なのですが、例えばサイトのキャプチャなど縦長の画像の場合に長辺が圧縮されて非常に見ずらくなってしまいます。
なので今回、Lightbox2で表示される画像を任意の横幅で可変できるようにカスタマイズしてみました。
ちなみに今回使用したバージョンは2.8.2になります。
Lightbox2使用方法
一応簡単にですが使用方法から。
ダウンロード
Lightbox2 downloadフォルダをコピー
解凍したデータからsrcフォルダ内の下記フォルダを自身のサイトにコピーする。
images
js
読み込み
jQueryに加えてLightboxのcssとjsを読み込む
|
1 2 3 4 5 |
<!-- css読み込みは基本的にhead内に記述 --> <link rel="stylesheet" href="css/lightbox.css"> <!-- jsは</body>直前に記述 --> <script src="js/lightbox.js"></script> |
タグ記述
モーダル表示したい画像を「rel="lightbox"」を付けたaダグで囲う。
|
1 2 3 |
<a href="sample.jpg" rel="lightbox"> <img src="sample.jpg"> </a> |
以上でLightboxの設置は完了です。
モーダルウィンドウを任意のサイズで表示する
デフォルトのソース
まずデフォルトでモーダルウィンドウサイズを指定している構文から見てみます。
バージョン2.8.2では268行～281行になります。
Lightbox2のソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//Is there a fitting issue? if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) { if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) { imageWidth = maxImageWidth; imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10); $image.width(imageWidth); $image.height(imageHeight); } else { imageHeight = maxImageHeight; imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10); $image.width(imageWidth); $image.height(imageHeight); } } |
ここで出てくる変数と使用される値は下記の通りです。
変数
windowHeight：ウィンドウの縦幅
maxImageWidth：表示可能な最大横幅
maxImageHeight：表示可能な最大縦幅
preloader.width：画像の横幅
preloader.height：画像の縦幅
imageWidth：表示する横幅
imageHeight：表示する縦幅
デフォルトソースのフロー
２．縦幅より横幅のほうがスペースが大きい場合、縦幅に合わせて縮小
３．そうでない場合は横幅に合わせて縮小
尚、縮小時に対する幅、例えば縦幅を軸に縮小する場合の横幅は、縦幅の縮小比率を算出して同比率のサイズを代入しています。
あとは$image.width()と$image.height()で定義しています。
ソースの置き換え
上記のフローを踏まえてソースを改変します。
機能させたい条件
２．そうでない場合は横幅をウィンドウサイズの90%に固定。縦幅は同比率で縮小
置き換えるソース
|
1 2 3 4 5 6 7 8 9 10 11 |
if(windowWidth > 1000){ imageWidth = 800; imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10); $image.width(imageWidth); $image.height(imageHeight); }else{ imageWidth = maxImageWidth*0.9; imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10); $image.width(imageWidth); $image.height(imageHeight); } |
以上です。
記述がどこにあるかと変数の役割が分かればあとはシンプルに書けました。
もちろんウィンドウサイズの条件を追加することも可能です。
まとめ
正直どこに何が書かれているのか分からないままソースを眺めている間は気が滅入りましたが、ビギナーでも場所が分かれば何とかなるものです。
ちなみにlightbox.js内のLightbox.defaultsに下記のような記述がありましたが、デフォルトではfitImagesInViewportしか機能しませんでした。
lightbox.js 41行目 Lightbox.defaults内
|
1 2 3 |
fitImagesInViewport: true, ：画像サイズが大きい場合に縮小表示（falseで原寸表示） // maxWidth: 800, ：最大横幅（？） // maxHeight: 600, ：最大縦幅（？） |
使い方が悪かったのか実装予定のものなのか分かりませんが、とりあえずメモとして残しておきます。
