脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

[Lightbox] 画像クリック時に拡大して表示するLightboxの使い方

Lightboxの使い方

このPageでは以下のLightboxの使い方を説明します。
http://lokeshdhakar.com/projects/lightbox2/

そもそもLightboxとは何か?

上のサイトのTOPページを見て頂けば一発ですが、画像をクリックした際にその画像をブラウザサイズに拡大するためのツールです。

使い方

1. LightBoxのダウンロード
まずは公式サイト(http://lokeshdhakar.com/projects/lightbox2/)からLightboxをダウンロードしてきましょう。
ダウンロードしてきたファイルを解凍すると以下のような構造になっています。

lightbox
  |-css
  |  |-"lightbox.css"
  |  |-"screen.css"
  |
  |-"img"
  |  |-demopage
  |  |-close.png
  |  |-loading.png
  |  |-next.png
  |  |-prev.png
  |
  |-js
  |  |-"jquery-1.11.0.min.js"
  |  |-jquery-1.11.0.min.map
  |  |-lightbox.js
  |  |-"lightbox.min.js"
  |  |-lightbox.min.map
  |  
  |-index.html
  |-README.markdown

このディレクトリにはデモページやデモ画像なども色々入っているのですが、ここで重要なのは以下の5ファイル(ディレクトリ)です。

2. まずはlightboxを使用したいファイルで上記のcssファイルとlightboxファイルを, jqueryを読み込みます。
展開してきたlightboxディレクトリに作成する場合は、以下のように書きます。

<html>
<head>
	<link rel="stylesheet" href="css/screen.css">
	<link rel="stylesheet" href="./css/lightbox.css">
</head>
<body>
	hogehoge
	<script src="./js/jquery-1.11.0.min.js"></script>
	<script src="./js/lightbox.js"></script>
</body>
</html>

これでもうlightboxを使用する準備は出来ました。
imgファイルに関しては、lightbox.cssに使用するための記述が書かれていますので、
このディレクトリ構造のままの場合は特に何もする必要はありません。

/* Preload images */
body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}
.
.
.

3. 画像を指定する
まずは最低限としてbodyタグの中に以下のように書けばLightBoxの機能は使用できます

<a href="img/demopage/image-1.jpg" data-lightbox="hoge">
	<img width="25%" src="img/demopage/image-1.jpg" />
</a>

順に説明していくと、
1行目 < a href="img/demopage/image-1.jpg" data-lightbox="hoge" >

  • 実際に拡大された後にされる画像を設定します。
  • data-lightbox属性に関しては何かしら値をいれないと拡大時の動きが変化してしまいます(hogehogeに意味はありません)

2行目 < img width="25%" src="img/demopage/image-1.jpg" / >

  • 拡大される前(クリックされる前)の画像の設定をします。
  • 今回は同じ画像を使い、サイズを25%に縮小して表示しています。

これでシンプルなLightboxの拡大機能は使用することが出来ます。

マウスオーバー時に画像に青く枠を表示させる

<a href="img/demopage/image-1.jpg" data-lightbox="hoge">
	<img class="blue-frame" width="25%" src="img/demopage/image-1.jpg" />
</a>

上記のように2行目でblue-frameクラスを指定して、以下のcssを読み込ませば完了です。

.blue-frame {
  display: inline-block;
  padding: 4px;
  margin:0 0.5rem 1rem 0.5rem;
  background-color: #fff;
  line-height: 0;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  -ms-border-radius:6px;
  -o-border-radius:6px;
  bordr-radius: 6px;
}

.blue-frame:hover {
  background-color: #4ae;
}

クリックで次の画像に送れるようにする。

まずは準備として画像を3つに増やします。

	<a href="img/demopage/image-1.jpg" data-lightbox="hoge">
		<img class="blue-frame" width="25%" src="img/demopage/image-1.jpg" />
	</a>
	<a href="img/demopage/image-2.jpg" data-lightbox="fuga">
		<img class="blue-frame" width="25%" src="img/demopage/image-2.jpg" />
	</a>
	<a href="img/demopage/image-3.jpg" data-lightbox="hoge">
		<img class="blue-frame" width="25%" src="img/demopage/image-3.jpg" />
	</a>

準備と書きましたがこれで完了です。
ここではじめてdata-lightbox属性が意味を成します。

  • image-1.jpgとimage-3.jpgのdata-lightbox属性の値は同じなので、画像を拡大した際に左右に矢印マークが出てきて、それぞれの画像に変更することが出来ます。
  • しかしimage-2.jpgのdata-lightbox属性の値は他の二つと異なるので、image-2.jpgは飛ばされて表示をされます。