【イラスト・写真展示】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ですので当然画像は読み込めません。正しい相対パスに修正しましょう。

創作・同人サイトにオススメのサーバー

スターサーバー キャンペーン中!

オススメ度  star star star star star

スターサーバーでは2021年5月10日まで、すべてのプランの初期費用が無料になるキャンペーンを実施中です!キャンペーン期間中は、月額440円のスタンダードプランより上位のプランを12ヵ月以上で新規契約すると、契約期間を1年分無料延長できるほか、.comや.netなどのドメインが1年間利用無料になります。

使用料 初期費用1,650円無料!
最低月額138円〜
WordPress有は月額330円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ 不可

最低月額138円のローコストで、大容量・高速のサーバーが利用できます。契約中のプラン変更も可能。とりあえず有料サーバーを試したい方にオススメ

スターサーバー

ロリポップ!レンタルサーバー

オススメ度  star star star star star

使用料 初期費用1,500円~
最低月額100円〜
WordPress有は月額250円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ

月額100円から使える、コスパ最強の老舗レンタルサーバー!個性的で可愛いドメインが選べるのも魅力的。当サイトもロリポップ!を利用しています。

ロリポップ!レンタルサーバー

リトルサーバー

オススメ度  star star star star star_half

使用料 初期費用920円
最低月額150円〜
容量 20GB〜
WordPress すべてのプランで可
成人向けコンテンツ

比較的新しいレンタルサーバー。なんと缶ジュースほどの値段でWordPressを安定したサーバーで使える!7日間の自動バックアップ機能もあって、もしものときも安心。個人サイトの新しいスタンダードになるかも

リトルサーバー

さくらのレンタルサーバ

オススメ度  star star star star star_half

使用料 初期費用1,048円~
最低月額131円〜
WordPress有は月額524円〜
容量 10GB〜
WordPress ライトプランのみ不可
その他のプランは可
クイックインストール機能付き
成人向けコンテンツ

自動バックアップなど、安心・快適にサイトを運営する機能が魅力のレンタルサーバー。財布にも優しいのが◎。もちろんWordPressも使えます

さくらのレンタルサーバ

XREA Free

オススメ度  star star star star star_border

使用料 無料
容量 1GB
PHP
WordPress
いずれも使用可

なんと無料ながらWordPressも使える。必要な機能を必要なだけ、シンプルなレンタルサーバー。物足りなくなったら有料プランへグレードアップも可!手軽に始められて、初心者にもやさしい仕様

XREA
レンタルサーバー比較