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

ダウンロード

Lightbox2 download

フォルダをコピー

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

読み込み

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の設置は完了です。

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

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

変数

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

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

機能させたい条件

置き換えるソース

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

以上です。
記述がどこにあるかと変数の役割が分かればあとはシンプルに書けました。
もちろんウィンドウサイズの条件を追加することも可能です。