Lightbox2を使って画像をポップアップ（モーダル）表示する方法

Lightbox2を使って画像をポップアップ（モーダル）表示する方法をご紹介します。Lightboxは有名なのでご存じかと思いますが今まで紹介してなかったのでご紹介します。

Lightbox2を使って画像をポップアップ表示するCSSの記述

※lightbox.min.cssファイルを読み込みます。サムネイル（a[data-lightbox] img）のCSS記述です。

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
a[data-lightbox] img {
  width: 150px;
}
</style>
<link rel="stylesheet" href="./css/lightbox.min.css">

Lightbox2を使って画像をポップアップ表示するHTMLの記述

※ポップアップ表示させるサムネイル（1～4.jpg）を用意し、サムネイルのリンク（a）タグにhref=”ポップアップ表示させる画像ファイルへのリンク”、data-lightbox=”サムネイルグループ名”、data-title=”キャプション”を設定します。必要に応じて変更して下さい。

<h1>lightboxを使って画像ポップアップを表示します。以下のサムネイルをクリックして下さい。</h1>

    <div>
<a href="1.jpg" data-lightbox="lbox" data-title="イメージ1"><img src="1.jpg"></a>
<a href="2.jpg" data-lightbox="lbox" data-title="イメージ2"><img src="2.jpg"></a>
<a href="3.jpg" data-lightbox="lbox" data-title="イメージ3"><img src="3.jpg"></a>
<a href="4.jpg" data-lightbox="lbox" data-title="イメージ4"><img src="4.jpg"></a>
    </div>

Lightbox2を使って画像をポップアップ表示するJavaScriptの記述

※lightbox-plus-jquery.min.jsファイルを読み込むだです。

<script src="./js/lightbox-plus-jquery.min.js"></script>

lightboxを使って画像ポップアップを表示するデモページ

lightboxを使って画像ポップアップを表示するデモページ

ソース元：Lightbox2

以下がソース元です。
Lightbox2

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。