LightBoxを使用する準備
１、必要なファイルを読み込む
まずLightbox公式サイトからファイルをダウンロードします。
ダウンロードしたファイルを解凍して必要なファイルを読み込みます。
必要なファイル
- lightbox-plus-jquery.min.js
- lightbox.min.css
- imagesファイル内にある４つの画像ファイル
２、HTMLで画像をリンクする
<a href="クリックで表示させたい画像のパス" data-lightbox="image-group"><img src="サムネイル用の画像"></a> <a href="クリックで表示させたい画像のパス" data-lightbox="image-group"><img src="サムネイル用の画像"></a>
data-lightbox=”任意のグループ名”
data-lightboxオプションで共通のグループ名を指定することで矢印で隣の画像を表示できるようになります。
これで、サムネイルをクリックすることで画像が表示されるようになります。
