【イラスト・写真展示】Lightboxの設置方法と使い方

イラスト・写真展示に便利 Lightboxの設置方法と使い方

Lightboxとは、サムネイル画像やリンク文字をクリックすると、画面が暗くなるとともにリンク先の画像がズームして表示されるjQueryスクリプトです。詳しい挙動は公式サイトのデモをご確認ください。

当サイトで配布しているhtmlテンプレートにも使用しています。

ページ遷移せずに大きな画像をサクサク表示できるため、イラスト・写真の展示によく使われます。導入も簡単で、MITライセンスに基づいており、改造や再配布、商用利用や販売物への利用も認められていることから、多くのサイトに導入されています。

この記事では、Lightboxの使い方・カスタマイズ方法を紹介します。

~宣伝~
当サイトではLightboxをよりシンプルで今風のデザインにしたJavascriptスクリプト「fuwaimg」を配布しています。日本語マニュアル完備でjQueryも不要ですので、よければこちらもチェックしてみてください。

Lightboxの導入方法

当サイトで配布しているテンプレートには標準導入されていますので、この手順は不要です。「Lightboxの使い方」まで読み飛ばしてください。

ソースコードをダウンロードする

公式ホームページから、ソースコードをダウンロードします。

GETTING STARTEDの項目に「Github Releases page」というリンクがあります。ここからSource codeをダウンロード、解凍します。

解凍するとなにやらたくさんファイルが入っていますが、使うものは以下だけです。

  • src > css > lightbox.css
  • src > js > lightbox.js
  • src > imagesの中に入っている画像4点

これらをサーバーの適当な場所にアップロードします。

サイトでソースコードを読み込ませる

<head> ~ </head>の中で、lightbox.cssおよびlightbox.jsを読み込ませます。相対パスは、ファイルの置き場所に合わせて書き換えてください。
※jQueryプラグインですので、必ずjQueryを先に読み込ませてください。

<link rel="stylesheet" href="css/lightbox.css">
<script src="js/lightbox.js" type="text/javascript"></script>

これでLightboxを利用する準備ができました。

Lightboxの使い方

<a href="表示したい画像のパス" data-lightbox="group" data-title="ここに説明"><img src="サムネイル画像のパス"></a>

aタグに「data-lightbox="〇〇〇"」というプロパティを与えると、Lightboxが適用され、クリックしたときにhrefで指定した画像が表示されます。data-title="〇〇〇"のプロパティを与えると、画像下部にキャプションをつけることができます。

画像のグループ分け

関連する画像のグループは、data-lightboxの値を同じにすることでまとめることができます。

<a href="img01.jpg" data-lightbox="group-a" data-title="旅の画像1"><img src="..."></a>
<a href="img02.jpg" data-lightbox="group-a" data-title="旅の画像2"><img src="..."></a>
<a href="img03.jpg" data-lightbox="group-a" data-title="旅の画像3"><img src="..."></a>

<a href="img04.jpg" data-lightbox="group-b" data-title="犬の画像1"><img src="..."></a>
<a href="img05.jpg" data-lightbox="group-b" data-title="犬の画像2"><img src="..."></a>

このように設定すると、group-a(旅の画像グループ)はそれだけで、group-b(犬の画像グループ)はそれだけで、矢印ボタンのページ送りでまとめて見ることができます。

ページ送りを使わず、画像を単独で表示したい場合は、すべてのdata-lightboxの値を異なる値で設定します。

トラブルシューティング

data-lightboxの値を指定しているのに、普通のリンクになる

  • jQueryを読み込んでいますか?
  • Lightboxのjsファイル・cssファイルの相対パスは間違っていませんか?

LightboxはjQueryを使わなければ動きません。head内でjQueryを読み込んでご利用ください。また、Lightboxのソースコードを設置した場所と、読み込む記述の相対パスが一致していないと動きません。一度確認してみましょう。

Lightboxは動いたけど、×やページ送り矢印が表示されない

  • cssファイル内の画像を呼び出す記述の、相対パスが間違っている可能性があります

lightbox.css内の記述の画像の相対パスは、デフォルトの状態ではurl(../images/〇〇.png)になっています。例えば、当該画像を入れているフォルダ名がimgであれば、正しい相対パスは../img/〇〇.pngですので当然画像は読み込めません。正しい相対パスに修正しましょう。

   【PR】HTML/CSSを基礎から勉強したい方へ

HTML/CSS初心者のための書籍を執筆しました

個人サイトを作ろう! テンプレートですぐできる!すぐに身につく!HTML&CSS

これから初めてHTML・CSSに触れる方や、過去に個人サイトを作ったことがあるけど、最新のHTML・CSSやウェブサイト制作を学び直したい!という方に向けた、創作・同人サイトを作るための本です。
書籍購入者には特典として、「do」でも配布していないオリジナルHTMLテンプレート3種が利用できます。本書では、このテンプレートを実際に自分で編集することでHTML・CSSを学んでいくため、初めての方でも理解しやすい内容に仕上がっています。
「do」では紹介しきれなかった、サイト制作の基礎の基礎から網羅した入門にオススメの書籍です。ぜひお手に取ってみてください!

Amazonで購入する