Lightboxは、クリックするとふわりと画像を拡大表示することができるJavaScriptのライブラリです。jQuery非依存で単体で動作します。
挙動については、以下デモページをご参照ください。
Lightboxの使い方
ステップ1. Lightboxのダウンロードとファイルの設置
GitHubからファイル一式をダウンロードします。ダウンロードしたファイルを解凍し、以下のファイルとフォルダをサーバー上にアップロードします。
- dist/css/lightbox.min.css
- dist/images
- dist/js/lightbox.min.js
imagesフォルダは、css/jsフォルダと同階層に置いてください。
ステップ2. 各種ファイルの読み込み
以下を<head>～</head>内に記述して、CSSファイルとJSファイルを読み込みます。
<link rel="stylesheet" href="dist/css/lightbox.min.css"> <script src="dist/js/lightbox.min.js"></script>
JSファイルの読み込みは、</body>の直前に追加してもOKです。
ステップ3. HTMLのマークアップ
画像を拡大表示させたい箇所で、以下のようにマークアップします。
<a href="images/sample.jpg" data-lightbox="sample" data-title="タイトル"><img src="images/sample.jpg" alt=""></a>
リンク先は画像へのパス、data-lightbox属性には任意の名前を入れます。data-title属性は画像のタイトルを入れますが、こちらは省略可です。
複数の画像をグループ化したい場合は、data-lightbox属性で同じ名前を指定してあげます。
<a href="images/sample1.jpg" data-lightbox="sample"><img src="images/sample1.jpg" alt=""></a> <a href="images/sample2.jpg" data-lightbox="sample"><img src="images/sample2.jpg" alt=""></a> <a href="images/sample3.jpg" data-lightbox="sample"><img src="images/sample3.jpg" alt=""></a>
上記のようにすることで、複数の画像がグループ化され、拡大表示した時にスライドのように画像間を移動して表示できます。
Lightboxのオプション
Lightboxには様々なオプションが用意されています。オプションを指定したい場合は、以下のようなスクリプトをlightbox.min.jsの読み込みよりも後ろに追加します。
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
指定できるオプションは以下の通りです。
| オプション | デフォルト値 | 説明 |
|---|---|---|
| alwaysShowNavOnTouchDevices | false | 画像グループの場合、矢印を常に表示 |
| albumLabel | “Image %1 of %2” | 画像グループ用のタイトル |
| disableScrolling | false | 画像拡大時のスクロール固定 |
| fadeDuration | 600 | フェードイン・フェードアウトにかかる時間 |
| fitImagesInViewport | true | 画面サイズによる自動リサイズ(画像のはみ出しを防止) |
| imageFadeDuration | 600 | イメージがロードされてからフェードインするのにかかる時間 |
| maxWidth | 指定なし | 最大横幅 |
| maxHeight | 指定なし | 最大縦幅 |
| positionFromTop | 50 | 拡大画像の表示位置(上部からの距離) |
| resizeDuration | 700 | 異なるサイズの画像間を移動する際のリサイズにかかる時間 |
| showImageNumberLabel | true | 画像の全枚数と現在の枚数表示 |
| wrapAround | false | 画像グループ内の移動をループ |
あとがき
導入も割と簡単なので、画像の拡大表示エフェクトを実装したい時は、ぜひ導入をご検討ください。jQueryに依存せず単体で動くライブラリというところも良いですね。