Lightbox は画像を使ったモーダルウィンドウが簡単に設定できます。
Lightboxの公式サイトからダウンロードする
Githubからデータをダウンロードする際、Lightboxは「master」ではなく「dev」になっているので「master」を選択しZIPファイルをダウンロードする。
手順
- JQuery本体を読み込む
- LightboxのCSSとJSファイルを読み込む
- data属性の設定をする
distから必要な書類を自分の管理フォルダに移動する
distフォルダ内のCSS・JS・imageフォルダから必要なデータを自分の管理フォルダへ移動する。
- lightbox.css
- lightbox.js
- images フォルダ内の画像
ダウンロードしたファイルを読み込む
<head>内に lightbox.css を読み込む
<link rel="stylesheet" href="css/lightbox.css">bodyの終了タグの上にJQuery本体のCDN と lightbox.js を読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="js/lightbox.js"></script>data属性を使い設定を追加する
Lightboxの場合は呼び出し関数を使うのではなく、data属性を使って設定をします。
基本的な設定
基本的な設定は以下のようになります。
コントロールしやすいように全体を<p>タグで囲むこともあります。
<a href="画像のパス" data-lightbox="roadtrip"><img="画像のパス" alt=""></a>
data-lightbox=”グループの名称” を使ってグループ設定をする
ポップアップさせたい画像に「data-lightbox」という属性が付いた <a> タグで画像をリンクします。data-lightbox=” グループ名”には自分でわかりやすい名前をつけます。
（グループの名称部分を空の状態にはできません。）
a href=”画像のパス”はポップアップで表示する拡大後の画像、img src=”画像のパス”はサムネールの画像です。同じ画像でも良いですし、大きさを変えた画像でもOKです。
data-title=”画像のタイトル” を使って写真のタイトルの設定をする
data-lightbox 同様、<a> タグに設定するのが、data-title=”画像のタイトル” になります。
モーダルウィンドウでポップアップ表示された写真の下に表示されます。任意でタイトルの設定ができます。