及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > JavaScript > Lightbox2の設置方法 - クリックで画像を拡大表示

Lightbox2の設置方法 - クリックで画像を拡大表示

2015/07/14
lightbox：クリックで同ページ上に画像を拡大表示 Lightbox はオープンソースの JavaScript。
テキストや画像などをクリックで、背景を暗くし、同じページ上に画像をオーバーレイで表示させる。

Lightbox2
※この記事を書いた時点（2015/07/14）での最新バージョンは Lightbox v2.8.1 (2015/07/09 リリース)。

以前、Lightbox v2.51（2012/04/20 リリース）について書きましたが、
ここでは現時点での最新バージョン Lightbox v2.8.1 についてのメモ。

サンプル

下の写真をクリックしてみてください。
飛行機の画像 飛行機の画像 飛行機の画像

複数の画像をグループ化する設定をすると、矢印で次の写真を表示することが出来る。
lightbox 複数画像

Lightbox v2.8.1 設置方法

基本の設定

  1. スクリプトをダウンロード。
    Lightbox2
  2. ダウンロードファイルを解凍。
    下記のファイルをご自分のサイトの任意の場所に設置。

    lightbox2-master/dist/css/lightbox.css
    lightbox2-master/dist/js/lightbox.js
    lightbox2-master/dist/images/ (←「images」フォルダまるごと。)

    ※上記以外に jQuery が必要。
    ※ jQyery を設置できない場合は、上記の「lightbox.js」の代わりに、jQuery が不要な「lightbox-plus-jquery.min.js」（lightbox2-master/dist/js/　内に有り）を使用する。
    　
  3. HTML の head 内に下記を記述。
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="○○○/○○○/lightbox.css" />
    • 上記では、GoogleのCDNを使ってjQueryファイルを読み込んでいます。
    • ※上記の「○○○/○○○/」の部分は、ご自分で設置したパスに書き換えてください。
  4. </body>タグの直前に下記を記述。
        <script src="○○○/○○○/lightbox/js/lightbox.js"></script>
    • ↑これを、head 内に入れてしまうと lightbox が動作しないので注意。
    • head 内に jQuery を読み込まない場合は、上記の「lightbox.js」の代わりに、jQuery が不要な「lightbox-plus-jquery.min.js」を設置する。
  5. CSSの画像のパスを修正する。
    lightbox.cssの 3行目、82行目、113行目、131行目、195行目、付近を修正。

    閉じるボタンの画像：　url(../images/close.png)
    ローディングの画像：　url(../images/loading.gif)
    左矢印の画像：　url(../images/prev.png)
    右矢印の画像：　url(../images/next.png)

    各画像のパスが上記のように書いてあるので、ご自分で設置した「/images/」フォルダのパスに書き換える。

HTML の記述方法

アンカータグに、lightbox独自の属性を追記する。
<a href="images/sample.jpg" data-lightbox="sample" data-title="サンプル画像01">クリック</a>
href="images/sample.jpg：
　クリックで表示させる画像を指定。
data-lightbox="sample"：
　lightbox専用の属性。値の sample の部分は任意の名前でOK。
　グループ化する場合は sample の部分は共通の名前にする。
data-title="サンプル画像01"：
　クリックで表示された画像の下に表示されるキャプション。こんな感じ >>
※グループ化について：
複数の画像を次々と表示させる場合は、グループの設定をする。
「data-lightbox」の属性値を共通の名前にする。
グループ名は任意の名前でOK。 
    画像01
    画像02
    画像03
以上です。

レイアウトやデザインを変えたい場合

閉じるボタン、矢印、ローディングの画像を変更したいとき

images フォルダに入っている画像を修正する。
・閉じるボタンの画像：　close.png
・ローディングの画像：　loading.gif
・左矢印の画像：　prev.png
・右矢印の画像：　next.png

レイアウトや色などを修正するとき

CSS（lightbox.css）を修正する。
ちなみに、オーバーレイ部分のソースは下記のよう。CSSを修正する際の参考まで。
<div id="lightboxOverlay" class="lightboxOverlay"></div>
<div id="lightbox" class="lightbox">
    

        

            
            

            

        

    

    

        

            

                
                
            

            

        

    

</div>
MENU Ξ