サイト内の画像を拡大して表示するjQueryアプリケーション「Lightbox」の設置方法と使い方をご紹介します。
Lightboxは様々な機能が追加された派生型や有料版がたくさん登場していて、WordPressにはプラグインもありますが、今回は一番シンプルな本家本元のLightboxを使ってみます。
シンプルとはいえ、レスポンシブ対応なのでスマホやタブレットでもちゃんと横幅に合わせたサイズで表示されますし、optionのパラメーターを追加すれば、フェイドの時間など細かい動作も変更可能です。
また、Lightboxの最新版はJavaScriptファイルとjQueryが一体になっているので、以前より設置が簡単になりました。HTMLで構築されたサイトはもちろん、WordPressであまりプラグインを使いたくない場合にもオススメです。
あと、Lightboxが動かないという記事をネット上でチラホラ見かけますが、最近のバージョンではLightbox動作用のjavascriptファイル設置場所が変更されています。使用するjQueryのバージョンも1.7以降となっているので注意してください。
Lightboxのダウンロード
では、Lightboxを設置してみましょう。まずはLightbox公式サイトに進み、「DOWNLOAD」をクリックすると、Lightbox本体一式がダウンロードできます。
Lightbox公式サイトはこちらからどうぞ。
次にダウンロードしたLightbox本体「lightbox2-master.zip」を解凍すると、このようなファイル構成になっていました。ここから必要なファイルだけを抜き出します。
圧縮ファイルの名称やファイル構成は、時期やバージョンによって変わるみたいですが、Lightboxの動作で必要なファイルは決まっています。各フォルダ内から以下のファイルを抜き出して準備してください。
● lightbox-plus-jquery.min.js
● lightbox.css
● close.png
● loading.gif
● next.png
● prev.png
「lightbox-plus-jquery.min.js」と「lightbox.css」は「dist」フォルダ内の「js」と「css」に、残りの画像ファイルは「images」に入っています。通常はLightboxを動作させるためのjQueryを別途用意しないといけませんが、「lightbox-plus-jquery.min.js」は動作用のJavaScriptファイルとjQueryが一体になっているので必要ありません。
もしサイト内ですでにjQueryを使用している場合は、「lightbox-plus-jquery.min.js」を「lightbox.min.js」に変更してください。
jQueryの有無がわからない方は、ソースを表示させて＜head＞内に以下いずれかの記述があるか確認してください。「●」のところはパスやバージョンの数字が入るので、サイト毎に読み替えてください。
＜script src=”／／ajax.googleapis.com/ajax/libs/jquery/●.●.●/jquery.min.js”＞＜/script＞
＜script src=”●●●●●/jquery-●.●.●.js”＞＜/script＞
＜script src＞＜/script＞内に「jquery.min.js」や「jquery-●.●.●.js」という記述のあるコードがあれば「lightbox.min.js」を、なければ「lightbox-plus-jquery.min.js」を使うと考えてください。
また、ブックマークにjavascriptコードを登録しておいて、jQueryの有無を確認するという方法もあります。コードが読めない方はこちらの方が確実です。やり方は下記をご参考に・・・
ちなみに、Lightbox動作に用いるjQueryは、バージョン1.7以降となっています。
Lightboxの設置
必要なファイルの準備ができたので、Lightboxを設置していきましょう。まずは各ファイルをサーバーの「css」「js」「images」フォルダに移します。フォルダがなければ新規で作成してください。
- 「lightbox.min.js」か「lightbox-plus-jquery.min.js」は「js」フォルダへ
- 「lightbox.css」は「css」フォルダへ
- 「close.png」「loading.gif」「next.png」「prev.png」は「images」フォルダへ
あとは＜head＞内に「lightbox.css」を、＜/body＞の直前に「lightbox-plus-jquery.min.js」を追加すればOKです。jQuery有りサイトの場合は「lightbox.min.js」に変更してくださいね。
<head>
..............
..............
<link rel="stylesheet" href="css/lightbox.css">
</head>
..............
..............
<script src="js/lightbox-plus-jquery.min.js"></script>
</body>
※ 注意
CSSとjQueryを呼び出す際は、フルパス表記が必要となる場合があります。Lightboxが動作しない場合は、下記のように記載してみてください。
＜link rel=”stylesheet” href=”https://wind-mill.co.jp/iwashiblog/css/lightbox.css”＞
＜script src=”https://wind-mill.co.jp/iwashiblog/js/lightbox-plus-jquery.min.js”＞＜/script＞
赤字のURL部分は自分のサイトやブログに合わせて変更してくださいね。
Lightboxの使い方
Lightboxを動作させるためには、「data-lightbox」という属性が付いた＜a＞タグで画像をリンクします。＜a＞タグと＜img＞タグの画像URLは同じです。
<a href="images/gazou.jpg" data-lightbox="sample"><img src="images/gazou.jpg" /></a>
＜a＞タグに「data-title」を入れると、画像にキャプションを付けることができます。
<a href="images/gazou.jpg" data-lightbox="sample" data-title="説明文を入れる"><img src="images/gazou.jpg" /></a>
また、Lightboxは「data-lightbox」に入れた名前によって画像をグループ化します。
<a href="images/gazou01.jpg" data-lightbox="group01" data-title="画像1"><img src="images/gazou01.jpg" /></a> <a href="images/gazou02.jpg" data-lightbox="group01" data-title="画像2"><img src="images/gazou02.jpg" /></a> <a href="images/gazou03.jpg" data-lightbox="group02" data-title="画像3"><img src="images/gazou03.jpg" /></a> <a href="images/gazou04.jpg" data-lightbox="group02" data-title="画像4"><img src="images/gazou04.jpg" /></a>
「data-lightbox」に入れた名前が同じ場合は、画像1～4まで続けて表示されますが、上の例では「group01」と「group02」に分かれているので、2枚ずつ2グループで表示されます。
Lightboxのオプション
Lightboxには、オプションで細かい表示動作などをを変更できる機能があります。
例えばフェードの処理時間や最大縦横サイズ、画像位置などがオプションで変更可能です。一例として、画像間のリサイズ処理時間変更（resizeDuration）と、グループ内最後の画像から一番最初に戻るオプション（wrapAround）を設定しました。
<script src="js/lightbox-plus-jquery.min.js"></script>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
オプションはLightboxのjavascriptコードの下に追加してください。設定できるオプション項目はLightbox公式サイトに載っています。ただし英語ですが・・・(^^;
Lightboxはデフォルトのままでも十分使えますが、細かい動作にこだわりたい方は、上記コードを参考にしてオプションでいろいろ設定してみてください。
以上、Lightboxの設置と使い方でした。
WordPressにはLightboxをプラグインで設置できる「Lightbox Plus ColorBox」ってのもあります。設置方法を紹介してますので、よかったらご覧ください・・・
