jQueryで画像ポップアップ表示を行うLightboxを設置する方法 (2017年版)

小さなサムネイル画像をクリックすると大きな画像がポップアップで表示される「Lightbox」を設置する方法を紹介します。

  1. デモ
  2. 準備
  3. 設置方法
  4. 参考サイト

1.デモ

Lightboxのオフィシャルサイトで動作デモを確認することができます。
Lightboxオフィシャルサイト

2.準備

拡大表示用の高解像度画像ファイルを準備し、サムネイル画像から高解像度画像へリンクを設定します。

<a href="大きな画像.jpg"><img src="サムネイル画像.jpg" alt=""></a>

3.設置方法

手順1 「Lightbox」用ファイルのダウンロード

「Lightbox」の設置に必要なファイルをダウンロードします。
Download Lightbox2

手順2 「Lightbox」用ファイルをサイトフォルダ内に配置

ダウンロードした圧縮ファイルを展開し、「src」フォルダ内の「css」「images」「js」フォルダのみをローカルサイトフォルダ(製作中のサイトフォルダ)に配置してください。

手順3 スクリプト読み込みコードの記述

以下のコードをlightboxを利用するページの指定位置に記述してください。
lightbox.jsファイルの読み込みは</body>終了タグの直前でなければ動作しません。

1. <head>タグ内に貼り付け

<link href="css/lightbox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

2. </body>終了タグの直前に貼り付け (※重要)

<script src="js/lightbox.js"></script>

手順4 任意のリンクでlightboxを有効化

拡大表示用画像へのリンクタグ(aタグ)に「data-lightbox=”image”」の属性を追記してください。

<a href="大きな画像.jpg" data-lightbox="image"><img src="サムネイル画像.jpg" alt=""></a>

4.参考サイト

以下、参考サイトです。

 Lightboxオフィシャルサイト