今回は、画像をクリックしたらポップアップ画像を表示させることができるLightbox2について紹介します。

簡単に使えるので、是非参考にしてみてください。

Lightbox2とは？

Lightbox2とは、JavaScriptで簡単にポップアップ画像を表示することができるjQueryプラグインです。

無料で使えるので初心者にもおすすめです。

【Lightbox2】画像をクリックしたらポップアップ画像が表示される方法

デモサイトはこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

画像をクリックするとポップアップした画像が表示されることが分かるでしょう。

それでは実際にデモサイトのような動きを作っていきましょう！

必要なCDNを読み込む

まずはLightbox2を使うために必要なCDNを読み込みます。

以下のコードをheadタグの中に記述します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">

そしてbodyの閉じタグの直前に以下のコードを記述します。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>

これでLightbox2を使うための準備が整いました。

画像をクリックしたらポップアップ画像が表示されるようにコードを書く

imgタグには通常表示する画像を記述します。

クリックして表示される画像をaタグのhref属性に指定します。

「data-lightbox=””」には任意の文字列を指定し、「data-title=””」では拡大画像に付加されるキャプションを指定します。

ここまで出来たら画像をクリックしたらポップアップ画像が表示されるでしょう。

Lightbox2では今回紹介したこと以外にもオプションが用意されているので、興味ある方はLightbox2の公式サイトを参考にしてみてください。

まとめ

以上が、画像をクリックしたらポップアップ画像を表示させることができるLightbox2の紹介でした。