簡単に画像のポップアップ!「Lightbox」の実装方法

フロントエンド
簡単に画像のポップアップ!「Lightbox」の実装方法

画像をクリックしたらモーダルウィンドウが表示されるLightboxの設置方法です。オプションの説明もします。

ダウンロード

LightboxのサイトからダウンロードをしますLightboxサイト
設置方法についても書いてありますが全部英語です。
ダウンロードしたものの中身は↓


LightboxではjQueryを使用します。
ダウンロードした中にjQueryがはいってるものもあるのでそれを使用するか、jQuery本体を使用したい方はjQueryのサイトからダウンロードをしてください
jQueryサイト


使用するファイルについて

ダウンロードしたものの中に「src」と「dist」というファイルがあり、どちらにもcss/jsがありますが「dist」内のものを使用してください。
Lightboxサイトにもdistのものを読み込むとかいてあります。)
src内のものを使用してもLightboxは開きませんので注意。

dist内のものを自分のファイル内に移動して使用します。

imagesファイル内にはhover時に表示される「>」の画像が画像読み込み時のローデイング画像が入っています。
ファイルを移動させたあと、または、imagesファイルをimgなどにリネームした場合はcss内の画像のパスを変更しておく必要があります。


CSS/JSの読み込み


CSS

dist/css内の「lightbox.css」または「lightbox.min.css」をheadタグ内に読み込みます。

<link rel="stylesheet" href="css/lightbox.css">

JS

dist/js内のjsファイルをを「body閉じタグの直前に」読み込みます。
サイトにもさらっと書いてあります。headタグ内で読み込んでもだめなので注意。


jQuery本体を使う場合のJS


jQuery本体をダウンロードし読み込みます
jQueryの1.7以上が必要です。

jQueryを使う場合に読み込むLightboxのJSはdist内の「lightbox.js」「lightbox.min.js」です

<script src="js/lightbox.js"></script>

jQuery本体を使わない場合

dist内にjQueryとLightboxが両方入っている「lightbox-plus-jquery.js」「lightbox-plus-jquery.min.js」を使用します

<script src=""js/lightbox-plus-jquery.js></script>

HTML<画像の挿入>

aタグで囲み「data-lightbox」を書くことでモーダルウィンドウで表示されるようになります。

/*文字にリンク*/
<a href="画像のパス" data-lightbox="image-1">image</a>

/*画像にリンク*/
<a href="画像のパス" data-lightbox="image-1"><img src="画像のパス"></a>

複数の画像をまとめておきたい時(「>」で次の画像へ移動できる)はdata-lightboxに同じ値を指定することでまとめておくことができます。

<a href="画像のパス01" data-lightbox="group"><img src="画像のパス01"></a>
<a href="画像のパス02" data-lightbox="group"><img src="画像のパス02"></a>
<a href="画像のパス03" data-lightbox="group"><img src="画像のパス03"></a>

「data-title」を指定するとウィンドウで表示時に下部に表示されます

<a href="画像のパス" data-lightbox="image-1" data-title="タイトルが入ります">image</a>

オプション


scriptタグ内でオプションの記述ができカスタマイズできます
自分なりにわかりやすく翻訳し要約しまとめたものは下記に↓↓

<script>
        lightbox.option({
        /*オプションの記述の例*/
    'wrapAround': true,
    'alwaysShowNavOnTouchDevices': true
        })
</script>



指定できるオプション

オプション デフォルトの設定 説明
alwaysShowNavOnTouchDevices false trueの場合、マウスのhover時に左右のナビゲーション矢印が表示されます。
albumLabel "Image %1 of %2" キャプションの下に表示されるテキストを設定できます。デフォルトのテキストは、現在の画像番号とセットでの画像の総数を示しています。
disableScrolling false trueの場合、Lightboxが開いている間、スクロールができないようになります。
fadeDuration 500 ライトボックスコンテナ(モーダルウィンドウ)がフェードイン、フェードアウトするのにかかる時間をミリ秒単位で設定できます。
fitImagesInViewport true trueの場合、画面内に収まるように画像のサイズを変更します。
maxWidth 設定した場合は、画像の幅をピクセル単位で設定します。アスペクト比は維持されません。
maxHeight 設定した場合は、画像の高さをピクセル単位で設定します。アスペクト比は維持されません。
positionFromTop 50 ページ上部からの距離をpx単位で指定できます。
resizeDuration 700 異なるサイズの画像間の遷移時の幅と高さのアニメーション速度をミリ秒単位で指定できます。
showImageNumberLabel true falseの場合、キャプションの下に表示されるテキスト(現在の画像番号とセットでの画像の総数)が表示されなくなります。
wrapAround false trueの場合、最後の画像に達したときに、右のナビゲーション矢印が表示され、最初の画像に戻れるようになります。(ループしてみれる)

Lightbox