【初心者向け】Lightbox2って何？簡単に画像を拡大できるプラグインについて ｜ SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

 ＞  ブログ  ＞ 2017/03/02

【初心者向け】Lightbox2って何？簡単に画像を拡大できるプラグインについて

2017/03/02 カテゴリ - JavaScript,フロントエンド,技術情報

JavaScriptやjQueryを覚えたての人は、画像をクリックすれば拡大してくれるスクリプトを組みたくても、簡単に組めないのではないのでしょうか？

そんな課題を解決してくれるのがjQueryプラグインの「Lightbox2」です。
Lightbox2プラグインを挿入すれば、JavaScriptを触らずともHTMLだけでライトボックスを実装できます。

今回はLightbox2の使い方から、実際に触ってみるところまでを説明します。

Lightbox2とは？

上記で説明した通り、ライトボックス機能を提供してくれるjQueryプラグインです。

そもそもライトボックス機能とは、サムネイル画像をクリックした場合にモーダルウィンドウを開いて拡大画像を表示する機能のことです。
また、Ajaxの技術が使用されており、画面遷移せずになめらかに画像を閲覧できることも特長の１つです。

Lightbox2では、単に拡大画像を表示してくれるだけではなく、複数画像のグループ化することもできます。

Lightbox2を触ってみよう

今回は草原の上の動物をクリックするとライトボックスがでるようなものを作ってみましょう。

まず、下記のような草原を用意します。

草原

コードはこちらを参考にしてください。

<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/light-box_test.css"/>
  </head>
  <body>
    <div class="grassland"><img src="images/grassland.png"/>
    </div>
  </body>
</html>

[HTML(light-box_test.html)]

.grassland img {
  width: 100%;
}

[CSS(light-box_test.css)]

こちらを基盤にプラグインを導入していきます。
冒頭で述べた通り、Lightbox2はjQueryプラグインですので、jQueryも導入する必要があります。

ですので、jQueryとLightbox2をダウンロードして、必要なファイルを取り出してください。

jQuery

Lightbox2

今回は下記をファイルを使用します。

[jQuery]
jquery-2.0.3.js

[Lightbox2]
lightbox.min.js
lightbox.min.css

※ Lightbox2のimagesの直下のファイルは省いております

必要なファイルをお好きなディレクトリにおき、HTMLにタグを挿入していきます。

<html>
  <head>
    <meta charset="utf-8"/>
    <script src="js/lib/jquery-2.0.3.js" type="text/javascript"></script>
    <script src="js/lib/lightbox.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/light-box_test.css"/>
    <link rel="stylesheet" type="text/css" href="css/lib/lightbox.min.css"/>
  </head>
  <body>
    <div class="grassland"><img src="images/grassland.png"/>
    </div>
  </body>
</html>

[HTML(light-box_test.html)]

※ Lightbox2は必ず、jQueryの後に読み込ませてください。

これでライトボックス機能を実装する準備は完了です。
それでは、動物を配置していきましょう。

Lightbox2の記述は簡単で、下記のコードを埋め込むだけで指定した画像がライトボックスとなってくれます。

<div><a href="表示画像のURL" data-lightbox="グループID" data-title="拡大オーバーレイ画像のパネルに表示されるタイトル"><img src="表示画像のサムネイル画像のURL" alt="画像名"/></a></div>

data-lightboxについては、ライトボックスを個別に扱いたい場合はユニークなIDに、
グループにしたい場合は同一のIDを使用してください。

今回はサーベルタイガーのライトボックスを差し込みます。

<div class="animal saber_tiger"><a href="images/animal_00.png" data-lightbox="animal" data-title="サーベルタイガー"><img src="images/animal_00.png" alt="サーベルタイガー"/></a></div>

このコードを先程のHTML(light-box_test.html)に差し込み、CSSを少し調整して表示してみます。

草原とサーベルタイガー

クリックすると、このようになります。

ライトボックス(サーベルタイガー)

ライトボックス機能が完成しましたね。

更に、動物の数を増やしてみます。

草原と動物たち

クリックすると、グループ化しているので、左下にグループの数が表示されます。

ライトボックス(フェネックギツネ)

下記のコードを参考に作ってみてください。

<html>
  <head>
    <meta charset="utf-8"/>
    <script src="js/lib/jquery-2.0.3.js" type="text/javascript"></script>
    <script src="js/lib/lightbox.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/light-box_test.css"/>
    <link rel="stylesheet" type="text/css" href="css/lib/lightbox.min.css"/>
  </head>
  <body>
    <div class="grassland"><img src="images/grassland.png"/>
      <div class="animal saber_tiger"><a href="images/animal_00.png" data-lightbox="animal" data-title="サーベルタイガー"><img src="images/animal_00.png" alt="サーベルタイガー"/></a></div>
      <div class="animal fennec_fox"><a href="images/animal_01.png" data-lightbox="animal" data-title="フェネックギツネ"><img src="images/animal_01.png" alt="フェネックギツネ"/></a></div>
      <div class="animal raccoon"><a href="images/animal_02.png" data-lightbox="animal" data-title="アライグマ"><img src="images/animal_02.png" alt="アライグマ"/></a></div>
      <div class="animal penguin royal_penguin"><a href="images/animal_03.png" data-lightbox="animal" data-title="ロイヤルペンギン"><img src="images/animal_03.png" alt="ロイヤルペンギン"/></a></div>
      <div class="animal penguin penetration_penguin"><a href="images/animal_04.png" data-lightbox="animal" data-title="コウテイペンギン"><img src="images/animal_04.png" alt="コウテイペンギン"/></a></div>
      <div class="animal penguin gentoo_penguin"><a href="images/animal_05.png" data-lightbox="animal" data-title="ジェンツーペンギン" title="hoghoge"><img src="images/animal_05.png" alt="ジェンツーペンギン"/></a></div>
      <div class="animal penguin rockhopper_penguin"><a href="images/animal_06.png" data-lightbox="animal" data-title="イワトビペンギン"><img src="images/animal_06.png" alt="イワトビペンギン"/></a></div>
      <div class="animal penguin humboldt_penguin"><a href="images/animal_07.png" data-lightbox="animal" data-title="フンボルトペンギン"><img src="images/animal_07.png" alt="フンボルトペンギン"/></a></div>
    </div>
  </body>
</html>

[HTML(light-box_test.html)]

.grassland {
  position: relative;
}
.grassland img {
  width: 100%;
}
.animal {
  position: absolute;
}
.animal img {
  width: 150px;
}
.animal.saber_tiger {
  top: 15%;
  left: 40%;
}
.animal.fennec_fox {
  top: 35%;
  left: 20%;
}
.animal.raccoon {
  top: 10%;
  left: 10%;
}
.animal.penguin img {
  width: 120px;
}
.animal.royal_penguin {
  top: 5%;
  right: 30%;
}
.animal.penetration_penguin {
  top: 6%;
  right: 18%;
}
.animal.gentoo_penguin {
  top: 35%;
  right: 29%;
}
.animal.rockhopper_penguin {
  top: 38%;
  right: 16%;
}
.animal.humboldt_penguin {
  top: 24%;
  right: 6%;
}

[CSS(light-box_test.css)]

まとめ

いかがでしたでしょうか。
今回はLightbox2の使い方から触ってみるところまでを説明しました。

他にも様々な使い方がありますので、ドキュメントを確認してみてください。

Lightbox2を導入して、一味違ったページを作ってみましょう。

ブログのトップページに戻る

  • お問い合わせ

    SiTest の導入検討や
    他社ツールとの違い・比較について
    弊社のプロフェッショナルが
    喜んでサポートいたします。

  • コンサルティング

    ヒートマップの活用、ABテストの実施や
    フォームの改善でお困りの方は、
    弊社のプロフェッショナルが
    コンサルティングいたします。
    今すぐお気軽にご相談ください。

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲：
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

SiTest の革新的な機能を
お試しいただけます。
（利用規約）

お名前【必須】
メールアドレス【必須】
電話番号【必須】