画像などをクリックすると、
ポップアップ で拡大写真が表示されることってありますよね。
今回はライトボックスを簡単に導入できるプラグイン
「Lightbox」の使い方についてまとめてみます。
Lightboxを使うためのおおまかな手順
まずLightboxのページは下記になります。
使うためのおおまかな手順としてはこんなかんじです。
- 必要なデータをダウンロード
- データを自分のフォルダに格納 & 読み込ませる
- ポップアップを追加したい要素のHTMLに必要な属性を追加
- 必要に応じてオプションを追加
ではそれぞれの手順について、もう少し詳しくみていきたいと思います。
手順1：必要なデータのダウンロード
Githubページの「Clone or download」からフォルダをダウンロードしましょう。
動かすために必要なファイルは「dist」フォルダ内に格納されています。
- cssファイル：lightbox.css (distのcssフォルダ内)
- imagesフォルダ (distのimagesフォルダごと)
- jsファイル (distのjsフォルダ内) ※後述
- jQuery ※後述
Lightboxを動かすためにはjQueryの読み込みも必要です。
読み込み方法のパターンは2つあるようです。
1つ目の方法：
自分で別途jQueryを読み込む。
lightbox.jsファイルより前に記述して先に読み込まれるようにする。
2つ目の方法：
dist>jsフォルダ内にある、jQuery + Lightboxを両方兼ね備えた「lightbox-plus-jquery.js」を使用する。
手順2：データを自分のフォルダに格納 & 読み込み
ダウンロードした「cssファイル」「jsファイル」「imagesフォルダ」を
自分のフォルダに格納します。
そしてHTMLでcssファイル、jsファイルを読み込ませましょう。
- cssファイル→HTMLのheadタグ内
- jsファイル→HTMLのbodyタグの直前
別途jQueryを読み込む場合は、jQuery→Lightboxの順で読み込ませます。
これでLightboxを使う準備が完了です！
手順3：ポップアップを追加したい要素のHTMLに必要な属性を追加
ポップアップを導入したい要素のHTMLに「data-lightbox属性」を設定します。
【例】<a href=”ポップアップさせたい画像へのパス” data-lightbox=”○○”>Lightboxを導入する</a>
「data-lightbox」の値の○○は任意の名前で大丈夫です。
複数の要素に同じ「data-lightbox」の値を設定すると、
ポップアップをグループ化することができます。
ポップアップしたときの画像に左右の矢印アイコンがついて、
ポップアップ内で画像移動が可能になります。
Lightboxは発火させるためのJavaScriptやjQueryを記載する必要がなく、
これで基本的なライトボックスの導入が完了です。
手順4：必要に応じてオプションを追加
1：キャプションを追加したい場合
HTMLの「data-title属性」の値を入力することで、
キャプション名を追加することができます。
ポップアップが表示されたとき、左下に指定した文字が一緒に表示されます。
2：alt属性を追加したい場合
HTMLの「data-alt属性」に値を入力することで、
ポップアップした画像のalt属性を追加することができます。
3：その他のオプション
その他にオプションを追加したい場合は、
オプションメソッドを追加することで対応できるようです。
くわしいオプション内容は、Lightboxページの下部で見ることができます。
以上、Lightboxプラグインの導入方法でした。
