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

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

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

Lightbox2とは?

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

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

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

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

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

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

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

必要なCDNを読み込む

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

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

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

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

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

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

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

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

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

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

まとめ

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

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事