いわしブログ

京都のウィンドミル代表いわしのブログです。wordpressやfacebookの設定、ブログ運営について備忘録代わりに更新してます。最近は動画も作ってます。

*

最新版 Lightboxの設置と使い方

      2016/08/07

Lightbox

サイト内の画像を拡大して表示するjQueryアプリケーション「Lightbox」の設置方法と使い方をご紹介します。

Lightboxは様々な機能が追加された派生型や有料版がたくさん登場しており、WordPressにはプラグインで導入できるものもありますが、今回は一番シンプルな本家本元のLightboxを使ってみます。

シンプルとはいえ、レスポンシブ対応なのでスマホやタブレットでもちゃんと横幅に合わせたサイズで表示されますし、optionのパラメーターを追加すれば、フェイドの時間など細かい動作も変更可能です。

また、Lightboxの最新版はJavaScriptファイルとjQueryが一体になっているので、以前より設置が簡単になりました。HTMLで構築されたサイトはもちろん、WordPressであまりプラグインを使いたくない場合にもオススメです。

あと、Lightboxが動かないという記事をネット上でチラホラ見かけますが、最近のバージョンではLightbox動作用のjavascriptファイル設置場所が変更されています。使用するjQueryのバージョンも1.7以降となっているので注意してください。

Lightboxのダウンロード

では、Lightboxを設置してみましょう。まずはLightbox公式サイトに進み、「DOWNLOAD」をクリックすると、Lightbox本体一式がダウンロードできます。

Lightbox ダウンロード

Lightbox公式サイトはこちらからどうぞ。

http://lokeshdhakar.com/projects/lightbox2/

Lightbox

次にダウンロードしたLightbox本体「lightbox2-master.zip」を解凍すると、このようなファイル構成になっていました。ここから必要なファイルだけを抜き出します。

Lightbox 本体解凍

圧縮ファイルの名称やファイル構成は、時期やバージョンによって変わるみたいですが、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の有無を確認するという方法もあります。コードが読めない方はこちらの方が確実です。やり方は下記をご参考に・・・

http://raining.bear-life.com/jquery/jquery%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

jQuery:jQueryのバージョンを確認する方法 | raining

ちなみに、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」に変更してくださいね。

Lightboxの使い方

Lightboxを動作させるためには、「data-lightbox」という属性が付いた<a>タグで画像をリンクします。<a>タグと<img>タグの画像URLは同じです。

<a>タグに「data-title」を入れると、画像にキャプションを付けることができます。

また、Lightboxは「data-lightbox」に入れた名前によって画像をグループ化します。

「data-lightbox」に入れた名前が同じ場合は、画像1~4まで続けて表示されますが、上の例では「group01」と「group02」に分かれているので、2枚ずつ2グループで表示されます。

Lightboxのオプション

Lightboxには、オプションで細かい表示動作などをを変更できる機能があります。例えばフェードの処理時間や最大縦横サイズ、画像位置などがオプションで変更可能です。一例として、画像間のリサイズ処理時間変更(resizeDuration)と、グループ内最後の画像から一番最初に戻るオプション(wrapAround)を設定しました。

オプションはLightboxのjavascriptコードの下に追加してください。設定できるオプション項目はLightbox公式サイトに載っています。ただし英語ですが・・・(^^;

Lightboxはデフォルトのままでも十分使えますが、細かい動作にこだわりたい方は、上記コードを参考にしてオプションでいろいろ設定してみてください。

以上、Lightboxの設置と使い方でした。

WordPressにはLightboxをプラグインで設置できる「Lightbox Plus ColorBox」ってのもあります。設置方法を紹介してますので、よかったらご覧ください・・・

http://wind-mill.co.jp/iwashiblog/2014/04/lightbox-plus-colorbox/

WordPressのLightbox系プラグイン Lightbox Plus ColorBox | いわしブログ

 - jQuery