小さなサムネイル画像をクリックすると大きな画像がポップアップで表示される「Lightbox」を設置する方法を紹介します。
- デモ
- 準備
- 設置方法
- 参考サイト
１．デモ
Lightboxのオフィシャルサイトで動作デモを確認することができます。
Lightboxオフィシャルサイト
２．準備
拡大表示用の高解像度画像ファイルを準備し、サムネイル画像から高解像度画像へリンクを設定します。
<a href="大きな画像.jpg"><img src="サムネイル画像.jpg" alt=""></a>３．設置方法
手順１ 「Lightbox」用ファイルのダウンロード
「Lightbox」の設置に必要なファイルをダウンロードします。
Download Lightbox2
手順２ 「Lightbox」用ファイルをサイトフォルダ内に配置
ダウンロードした圧縮ファイルを展開し、「src」フォルダ内の「css」「images」「js」フォルダのみをローカルサイトフォルダ（製作中のサイトフォルダ）に配置してください。
手順３ スクリプト読み込みコードの記述
以下のコードをlightboxを利用するページの指定位置に記述してください。
※ lightbox.jsファイルの読み込みは</body>終了タグの直前でなければ動作しません。
1. Lightbox用CSSの読み込み（<head>タグ内）
<link href="css/lightbox.css" rel="stylesheet" />2. jQueryの読み込み （<head>タグ内）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>3. Lightbox用JSファイルの読み込み（</body>終了タグ直前）
<script src="js/lightbox.js"></script>手順４ 任意のリンクでlightboxを有効化
拡大表示用画像へのリンクタグ（aタグ）に以下の属性を追記してください。
data-lightbox="image"
<a href="大きな画像.jpg" data-lightbox="image"><img src="サムネイル画像.jpg" alt=""></a>４．参考サイト
以下、参考サイトです。