jQuery広告

Lightbox2のモーダルウィンドウを任意のサイズにカスタムする

Lightboxをカスタマイズ

画像のモーダル表示で便利なLightboxですが、デフォルトではウィンドウサイズの幅または高さに合わせて画像サイズが決定します。
これはこれで便利なのですが、例えばサイトのキャプチャなど縦長の画像の場合に長辺が圧縮されて非常に見ずらくなってしまいます。

なので今回、Lightbox2で表示される画像を任意の横幅で可変できるようにカスタマイズしてみました。
ちなみに今回使用したバージョンは2.8.2になります。

Lightbox2使用方法

一応簡単にですが使用方法から。

ダウンロード

Lightbox2 download

フォルダをコピー

解凍したデータからsrcフォルダ内の下記フォルダを自身のサイトにコピーする。


css

images

js

読み込み

jQueryに加えてLightboxのcssとjsを読み込む

<!-- css読み込みは基本的にhead内に記述 -->
<link rel="stylesheet" href="css/lightbox.css">

<!-- jsは</body>直前に記述 -->
<script src="js/lightbox.js"></script>

タグ記述

モーダル表示したい画像を「rel=”lightbox”」を付けたaダグで囲う。

<a href="sample.jpg" rel="lightbox">
	<img src="sample.jpg">
</a>

以上でLightboxの設置は完了です。

モーダルウィンドウを任意のサイズで表示する

デフォルトのソース

まずデフォルトでモーダルウィンドウサイズを指定している構文から見てみます。
バージョン2.8.2では268行～281行になります。

Lightbox2のソース

//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);
    }
  }

ここで出てくる変数と使用される値は下記の通りです。

変数

windowWidth：ウィンドウの横幅
windowHeight：ウィンドウの縦幅
maxImageWidth：表示可能な最大横幅
maxImageHeight：表示可能な最大縦幅
preloader.width：画像の横幅
preloader.height：画像の縦幅imageWidth：表示する横幅
imageHeight：表示する縦幅

デフォルトソースのフロー

１．表示可能なサイズより画像サイズが大きい場合に処理
２．縦幅より横幅のほうがスペースが大きい場合、縦幅に合わせて縮小
３．そうでない場合は横幅に合わせて縮小

尚、縮小時に対する幅、例えば縦幅を軸に縮小する場合の横幅は、縦幅の縮小比率を算出して同比率のサイズを代入しています。
あとは$image.width()と$image.height()で定義しています。

ソースの置き換え

上記のフローを踏まえてソースを改変します。

機能させたい条件

１．ウィンドウ幅が1000pxより大きい場合、画像の横幅を800に固定。縦幅は同比率で縮小
２．そうでない場合は横幅をウィンドウサイズの90%に固定。縦幅は同比率で縮小

置き換えるソース

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内

fitImagesInViewport: true,　　　：画像サイズが大きい場合に縮小表示（falseで原寸表示）
// maxWidth: 800,		：最大横幅（？）
// maxHeight: 600,		：最大縦幅（？）

使い方が悪かったのか実装予定のものなのか分かりませんが、とりあえずメモとして残しておきます。