今でもLightBoxを使ってます

LightBoxで画像を『ぐにゅーと』拡大表示

沢山のサイトへ導入された jQuery プラグイン「Lightbox」です。 画像をクリックすると、背景が暗くなり画面内に指定された画像が『ぐにゅーと』拡大表示されるアレですよ。 今でも使い勝手が良くて、Word Pressでも使用しています。 そこで、今更ながら「超簡単【jQuery】LightBoxの実装」と題して取り上げてみます。

LightBoxてどんなんだったけ?という方もいらっしゃるかもしれませんので、そんな時はサンプルページで動作をご確認下さい。 Lightbox:サンプル

LightBox(v2.8.2)導入

LightBoxを手に入れよう‼

LightboxをWebサイトへ実装するにあたり「Lightbox」を手に入れる必要があります。 「Lightbox」は公式サイトからとGitHubからのダウンロードが可能となっています。 公式サイトからのダウンロードはhttp://lokeshdhakar.com/から、「Lightbox」のデータをダウンロードします。 GitHubからのダウンロードするには〔lokesh/lightbox2〕へアクセスして、「Lightbox」のデータをダウンロードします。 ※最新のバージョンは2.8.2となります。(2016/08/26)

ダウンロードしたZIPファイルを解凍すると、「lightbox2-master」フォルダとファイルが作成されます。 lightbox2-master

LightBox実装には、「src」フォルダ内の「js」「images」「css」の全てのファイルが必要となります。

Lightbox「src」フォルダとファイルについて

フォルダ名ファイル名
jslightbox.js
csslightbox.css
imagesclose.pngloading.gifnext.pngprev.png

LightBox(v2.8.2)設置

LightBox設置手順

【重要】LightBoxはjQueryが設置されている事が前提です。 ※GoogleにホストされているライブラリからjQueryファイルを読み込む方法を紹介します。

  1. 【src】内のフォルダーをお使いのFTPクライアントを使用して、アップロードします。 LightBox-ftp
  2. html ファイルの 〜 内に、以下のコードを記述します。 ※各ファイルへのパスは環境に合わせて書き換えてください。 <link rel=”stylesheet” href=”css/lightbox.css”> <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <script src=”js/lightbox.js” type=”text/javascript”></script>
  3. 準備はこれで完了です。

LightBox(v2.8.2)実装

いよいよ画像をクリックすると『ぐにゅーと』拡大表示されますよ!

画像を単独で表示

aタグ内に 「data-lightbox=”image-1″」 を追加します。これで、LightBoxの実装が完了です。 ※「image-1」は別の値でもかまいませんよ どうです、驚くほど簡単でしょう‼

画像をグループ化して表示

aタグ内に 「data-lightbox=”image-group”」 を追加します。これで、LightBox(画像のグループ化)実装が完了です。 グループ化の際は「image-group」の値はなんでもかまいませんが、グループ内では共通の値を設定します。 共通の値、「data-lightbox=”image-group”」で指定された画像はグループ化され、画像の前後(左右)をクリックすると順にプレビューされていくようになります。 本当に、簡単ですね!

この他にオプションも用意されていますが、オプションの詳細は、別の機会にご説明しますので、それではまたの機会に(=゚ω゚)ノ