画像をポップアップ表示するLightbox系の「Image Lightbox」は、レスポンシブデザイン対応でタッチフレンドリーな操作が可能です。様々な表示方法があり、スワイプで画像を切り替えることができるのでスマホ対応サイトなどにも幅広く使用できます。（表示デモ）
実装はかなり簡単で、1つのjsファイルとjQueryをヘッダーで読み込んで、CSSを追加するだけなので、FC2などの無料ブログサービスにも最適です。
ここでは一例としてFC2ブログへの実装を紹介しています。
- imagelightbox.js か imagelightbox.min.jsをダウンロード。
どちらか片方を使用します。
中身は同じですがmin.jsはソースコードが圧縮されているのでファイルサイズが小さく、読み込みが若干早いというメリットがあります。
- FC2管理パネルからファイルアップロード。
FC2ブログはアップロードするファイル名にピリオドが使用できない制限があるので、imagelightbox.min.js をアップロードする場合は、 imagelightbox_min.js にファイル名を変更します。
テンプレートの<head> ~ </head>に以下のコードを埋め込み。
FC2ブログの場合、jsは絶対パスで指定します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://絶対パス/imagelightbox_min.js"></script>
<script>
$( function()
{
$( 'a' ).imageLightbox();
});
</script>
CSSには以下のコードを追加。
#imagelightbox
{
position: fixed;
z-index: 9999;
}
imgファイルにid指定をしなくても動作するので、投稿済みの記事を修正したりする必要はありません。
詳細設定は、ソースコード内のパラメータを変更することで可能です。
trueで有効、falseで無効。
$( selector ).imageLightbox(
{
selector: 'id="imagelightbox"', // string; ポップアップ表示の画像のid
allowedTypes: 'png|jpg|jpeg|gif', // string; lightboxを使う拡張子
animationSpeed: 250, // integer; アニメーションスピード
preloadNext: true, // bool; 次のイメージのプレロード
enableKeyboard: true, // bool; キーボードショートカット (arrows Left/Right and Esc)
quitOnEnd: false, // bool; 最後のイメージを見た後に閉じる
quitOnImgClick: false, // bool; イメージをクリックすると閉じる
quitOnDocClick: true, // bool; イメージ以外の部分クリックで閉じる
onStart: false, // function/bool; calls function when the lightbox starts
onEnd: false, // function/bool; calls function when the lightbox quits
onLoadStart: false, // function/bool; calls function when the image load begins
onLoadEnd: false // function/bool; calls function when the image finishes loading
});
Source: Osvaldas Valutis