LightBoxで簡単にギャラリーの実装ができたので導入と使い方メモ

はじめに

公式サイト

公式ドキュメント、デモはこちらから

LightBoxとは

簡単に言うとWebサイトでよく見かける、クリックすると画像がぽわ〜っと拡大して表示されるアレです。

個人的な依頼でWebサイトをつくることになりまして、

• 「ギャラリーページが欲しい」
• 「んで画像の横クリックしたら次の画像に移動するやつがいい」
• 「それと画像のグループが変わり目では移動させないで」
• 「あ、画像毎にタイトルも表示させたい」

と言った要望があり、色々と探した結果LightBoxに行き着きました。

ではどんな機能か、まさしく要望にあった通りです。

• サムネイルをクリックすると拡大画像が表示され、
• 画像クリックで遷移でき、
• グルーピングやキャプションの設定ができる
• 加えてCSSでデザインの変更も用意
• 導入も非常に簡単

夢のようですね。
JavaScript戦士のジョブ経験がない自分にはまさに夢のようです。

導入

公式からソースをダウンロードしjsディレクトリ内のlightbox.js、cssディレクトリ内のlightbox.cssを取り出し、導入するhtml内で読み込んで下さい。

外部から読み込ませる場合は、

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>

この2行を追加するだけで導入できちゃいます。お手軽！

LightBoxはJQueryで書かれていますので、JQueryの読み込みをLightBoxより前に行って下さい。

使用方法

配置

まずはコードから

<a href="hoge.jpg" data-lightbox="fuga" data-title="hoge">
   <img src="hoge_thumb.jpg" alt="hoge画像">
</a>

たったのこれだけで実装できてしまいます！

<a>~</a>タグで拡大させたい画像にリンクを貼り、子の<img>タグにサムネイル用の画像を配置します。
<a>~</a>タグのプロパティにdata-lightbox=""を追加することで機能します。

<img>タグ用にサムネイル用に画像を用意しなくても問題はありませんが、それ用に画像を用意しておくとページの表示が早いです(多分)。

グルーピング

次の画像、前の画像へ遷移させる場合、data-lightboxを同じにすればグルーピングできます。
テーマ別で分類し、同ページ内に配置する場合、

• data-lightbox="cat"
• data-lightbox="dog"

のようにわければ見た目上並んでいても遷移を防ぐことが出来ます。

data-titleのプロパティを記述することで、画像を拡大した時にデフォルトだと左下にキャプションが表示されます。

調整・カスタマイズ

拡大時の表示をCSSでカスタマイズできます。
表示がずれてしまう、などの問題があった場合は自力で調整が可能です。

LightBoxの拡大画像の表示ボックスはid="lightbox"で定義されています。
また、枠線はclass="lb-container"で定義されていますので、ここを編集することで白い枠線を補足したり太くしたり、色を変えたりと自由自在です。

#lightbox .lb-container { padding: 3px; }

例えば、この記述で枠線を細くすることができます。(デフォルトは6px)

他にも変更したい部分があればlightbox.cssを参照して見て下さい。
枠の角を丸くしたり、画像にフィルタを掛けたり、表示サイズを変えたりと自分好みに調整しましょう。

自分は依頼者のわがまま指示に従いましたが、こだわりがなければデフォルトのままでも全然問題ないです。

参考

【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。

画像拡大スクリプトLightboxの簡単な設置方法と使い方