Nagashima Laboratory

jQueryプラグイン（LightBox）

LightBox ライトボックス

サムネイルをクリックすると画像がモーダルウィンドウ上に拡大表示されます。

モーダルウィンドウ（modal window）…元のウィンドウの上に別枠で表示されるウィンドウのことです。

【準備】

①「JavaScriptを書くための準備」の資料を参考にして、空のHTML、CSS、JavaScriptファイルを作ります。

②フォルダの名前を jquery_lightboxに変更します

③画像を用意します。サンプル画像のダウンロードはこちら。

【設置方法】※公式サイトを合わせて参照してください

①公式サイトの Getting started を参考に、GitHubに移動し、最新版をダウンロードします。（sourse code(zip））

②ダウンロードしたファイルのうち、必要なファイルは、dist(distribution) フォルダ内にあるため、以下の通り、必要なものを取り出します

  • cssフォルダ…lightbox.min.css
  • jsフォルダ…lightbox.min.js
  • imagesフォルダ…close.png、loading.gif、prev.png、next.png

自分が制作中のサイトに合わせて、フォルダを整理する

↓↓↓

  • index.html
  • cssフォルダ
    • style.css
    • lightbox.min.css
  • jsフォルダ
    • lightbox.min.js
    • script.js
    • （jqueryをダウンロードする場合はjsフォルダに。CDNを使う場合は<head>に読み込み）
  • imagesフォルダ
    • close.png
    • loading.gif
    • prev.png
    • next.png
    • そのほか、自分で用意する画像

※特にimagesの構成に気をつけてください。lightbox用の素材（closeなど）と表示用の画像が１つのフォルダに入ります。

③HTMLの<head>にlightbox用のCSSを読み込みます。自分で用意したCSS（style.css）よりも先に読み込みます。

※cssフォルダ内にcssファイルがある場合の記述です

<link rel="stylesheet" href="css/lightbox.min.css">
<link rel="stylesheet" href="css/style.css">

⑤HTMLの</head>の直前にjQueryのコードを読み込みます

※CDNのjQueryは公式サイトを確認し最新のコードをいれてください。

<!--jQueryの最新コードはここに読み込みます-->

<script src="script.js" defer></script>
</head>

⑥jQueryのコードの下に、lightboxのscriptを読み込みます

lightboxのJavaScriptファイルはjsフォルダ内にある想定です

<!--jQueryの最新コード-->
<script src="js/lightbox.min.js" defer></script>
<script src="script.js" defer></script>

⑦script.jsは今回使用しないため削除またはコメントアウトします。

<!--<script src="script.js" defer></script>-->

⑧サムネイル画像に、拡大画像をリンクします。次のような書式でHTMLを記述します。日本語で書かれている部分は実際のファイル名に変更してください。

<a href="拡大表示させたい画像ファイル名" data-lightbox="任意の単語" data-title="キャプション"><img src="サムネイル画像ファイル名" alt=""></a>

リストタグ<ul><li>を使って、下記のような書き方もできます

<ul id="imgSet">
  <li><a href="拡大表示させたい画像ファイル名" data-lightbox="任意の単語" data-title="キャプション"><img src="サムネイル画像ファイル名" alt=""></a></li>
  ・・・
</ul>

※data-lightbox の部分は、通常、同じページ内では同じ単語を入れます。同じ単語が入ることで、複数の画像を連続的に見ることができます。（サンプルでは”image”と入れています）

※data-titleの部分はキャプションです。写真の説明文を入れます。

※サムネイル画像と拡大画像は同じものを使うこともできますが、ページを軽量化するため、サムネイルには、表示サイズに合わせた小さい画像を用い、拡大用の画像とは別にすることをおすすめします。

⑨style.cssの設定

必要に応じてCSSの設定をします。例えば、画像サイズや配置に関するスタイルを書き込みます

▼画像を横100%に

img   {
  width: 100%;
  height: auto;
}

▼画像を横並びにする（画面サイズが大きい場合）

#imgSet   {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

▼リストの左の余白を無くし「・」を非表示にする

ul {
  padding-left: 0;
  list-style: none;
}