シンプルでイケてるjQueryを使ったライトボックス系のプラグインをご紹介します。あと、公式ページの説明では動かなかったので自分が実装したときのソースコードを書いておきます。

ちなみに前回記事にしたツールチップのプラグインと同じ作者ですね。センスありまくりです。

ライトボックス系プラグイン「Image Lightbox」

Image Lightbox, Responsive and Touch‑friendly — Osvaldas Valutis

As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but...

画像読み込み中のローディングデザインがイケメンです。実際の動きはDEMOページをどうぞ。

基本的な使い方

このライトボックスは以下3つの手順で実装出来ます。

1. 表示したいimg要素を用意する
2. Image Lightbox用のCSSを貼り付ける
3. （ソースファイルをダウンロードして）プラグインの読み込み、実行

公式の説明を参考に、デフォルト設定での使い方について記述しておきます。

しかし冒頭で述べたように、公式の説明のままでは動かなかったので僕が実装出来たときのソースコードを書きます。もし動かない方は参考にしてみて下さい。

表示したいimg要素を用意する

img要素を用意し、そのimg要素をaタグで囲みます。aタグのリンクには拡大表示したい画像のURLを指定しましょう。僕はこうしなければ動きませんでした。

そして本家で説明されている、img要素に「id=”imagelightbox”」の属性は設定しません。

<a href="full-picture.jpg"><img src="picture.jpg" /></a>

Image Lightbox用のCSSを貼り付ける

このプラグイン用にCSSを用意します。ホームページのCSSファイルに貼り付けておきましょう。

この「#imagelightbox」は、クリックして拡大表示された画像に付くID属性になります。

#imagelightbox
{
    position: fixed;
    z-index: 9999;
}

 プラグインの読み込み、実行

公式ページからファイルをダウンロードして<script></script>タグで読み込みます。（ソースファイルはページ中央、見出しが「Javascript」の位置にあります。基本的には圧縮されたファイルサイズの小さいimagelightbox.min.jsを使いましょう）

プラグインを読み込んだら、実行させます。jQueryを既に読み込んでいる場合は以下ソースコードの1行目を削除して下さい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="imagelightbox.min.js"></script>
<script>
    $( function()
    {
        $( 'a' ).imageLightbox();
    });
</script>

ひとまずこれで動きます。動かない場合はファイルパスが間違っていないか、jQueryがちゃんと読み込まれているか確認してみて下さい。

プラグインのオプション

Image Lightboxにはオプションが幾つか用意されています。以下、本家のコメントの英語を日本語に翻訳。（by Google翻訳）

$( selector ).imageLightbox(
{
    selector:       'id="imagelightbox"',   // string; 拡大表示される画像に付く
    allowedTypes:   'png|jpg|jpeg|gif',     // string; 許可する画像の拡張子
    animationSpeed: 250,                    // integer;アニメーションの時間
    preloadNext:    true,                   // bool;   予め次の画像を読み込んでおく
    enableKeyboard: true,                   // bool;   キーボードショートカットの有効化（矢印の右左およびESCキー）
    quitOnEnd:      false,                  // bool;   最後の画像を表示した後に終了
    quitOnImgClick: false,                  // bool;   見た画像がクリックされたときに終了
    quitOnDocClick: true,                   // bool;   画像、ドックがクリックされたときに終了
    onStart:        false,                  // function/bool;   ライトボックスの起動時に関数を呼び出す
    onEnd:          false,                  // function/bool;   ライトボックスの終了時に関数を呼び出す
    onLoadStart:    false,                  // function/bool;   イメージのロードの開始時に関数を呼び出す
    onLoadEnd:      false                   // function/bool;   画像の読み込みが完了したときに関数を呼び出す
});

オプションを見た感じ、ライトボックス起動時や画像読み込みしたときに関数を呼び出せるオプションがあるので色々カスタマイズしやすそうですね。

キャプションや閉じるボタン、ナビゲーションは？

実はこのライトボックス、シンプルさを前面に押し出しているので

• キャプション（画像の補足説明）
• 閉じるボタン
• ナビゲーション

が表示されません。オプションでも設定出来ません。

じゃあどうしてDEMOページで表示されているのかというと、先述したプラグインのオプションでキャプションや閉じるボタン、ナビゲーションを表示する関数を呼び出してるんですね。

これに関しては実際にDEMOページのソースコードを見てコピーして使うのが良いと思います。

シンプルなライトボックスを求めているなら「Image Lightbox」はとてもオススメです！