Lightbox

Lightbox を使った画像表示

Sleeping egg では主に写真を掲載していくため、先に作成した fullPage.js ベースのティザーサイトで大きいイメージを表示するのに最適な Lightbox をとりあえず追加してみました。
※ ティザーサイトの作り方はこちら »

1. 公式サイトから Lightbox をダウンロード

Lightbox のダウンロード

Lightbox のダウンロード

トップページを下にスクロールすると、Lightbox v2.6 のリンクがあるので、そこからダウンロードします。

2. lightbox2.6.zip を解凍

lightbox2.6.zip の解凍ファイル一覧

lightbox2.6.zip の解凍ファイル一覧

解凍されたファイルには css, img, js の各ファイルと index.html が入っています。

3. 解凍した lightbox のフォルダを fullPage.js で作成したサイトに移動

fullPage サイトに lightbox フォルダを移動

fullPage サイトに lightbox フォルダを移動

Lightbox のファイルをまとめるために lightbox フォルダをそのまま移動していますが、外部リンク先を変更しない場合は img, js, css の各フォルダを example2.html と同じ階層に保存してください。

4. htmlファイルの<head>に JavaScript を追加

&lt;script type=&quot;text/javascript&quot; src=&quot;lightbox/js/lightbox-2.6.min.js&quot;&gt;&lt;/script&gt;

既にHTML内に jquery が入っているため、jquery-1.10.2.min.js は外しておきます。また、lightbox フォルダを使わない場合には lightbox/ の記述を消してください。

5. htmlファイルの <head> に CSS を追加

		&lt;link href=&quot;lightbox/css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;

lightbox フォルダを使わない場合には lightbox/ の記述を消してください。

6. 画像リンクに Lightbox を設定

&lt;a class=&quot;example-image-link&quot; title=&quot;キャプション-1.&quot; href=&quot;lightbox/img/demopage/画像-1.jpg&quot; data-lightbox=&quot;要素名/グループ名&quot;&gt;
&lt;img class=&quot;example-image&quot; alt=&quot;thumb-1&quot; src=&quot;lightbox/img/demopage/サムネール画像-.jpg&quot; width=&quot;150&quot; height=&quot;150&quot; /&gt;
&lt;/a&gt;
&lt;a class=&quot;example-image-link&quot; title=&quot;キャプション-2.&quot; href=&quot;lightbox/img/demopage/画像-2.jpg&quot; data-lightbox=&quot;要素名/グループ名&quot;&gt;
&lt;img class=&quot;example-image&quot; alt=&quot;thumb-1&quot; src=&quot;lightbox/img/demopage/サムネール画像-2.jpg&quot; width=&quot;150&quot; height=&quot;150&quot; /&gt;
&lt;/a&gt;

Lightboxを有効にするには、画像の a 要素に data-lightbox 属性を追加します。data-lightbox の値が単独の時は1枚画像に対しての効果、複数の画像に共通した data-lightbox 値を設定すると、共通のグループ画像として認識されます。また、キャプションを表示する場合は title 属性を設定します。

7. Lightbox の動作確認

通常の画像表示

通常の画像表示

↓画像をクリック↓

Lightbox 使用時の画像表示

Lightbox 使用時の画像表示

画像がモーダル・ダイアログで拡大表示されたら、Lightbox は正常に動作しています。

今回はサンプルをほぼそのまま使用していますが、ボタンやモーダル・ダイアログ時の背景色をはじめ、アレンジした使い方もやってみたいと思います。

このエントリーをはてなブックマークに追加
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>