プラグインで広く利用されているlightboxですが、ちょっとした用途にプラグイン導入は重かったり、カスタマイズが簡単にできるようにと思い、jqueryの理解を深める一環として自分なりにコードを組んでみました。 ギャラリーでの使用を前提にしてありますので、画像のタテヨコ比が変わっても対応出来るように作ったら意外にソースが長くなってしまいました･･･

画像のモーダル表示で便利なLightboxですが、デフォルトではウィンドウサイズの幅または高さに合わせて画像サイズが決定します。 これはこれで便利なのですが、例えばサイトのキャプチャなど縦長の画像の場合に長辺が圧縮されて非常に見ずらくなってしまいます。 なので今回、Lightbox2で表示される画像を任意の横幅で可変できるようにカスタマイズしてみました。