クリックするとウインドウ内で画像が拡大する「Lightbox2」の設置手順

2021/12/08

クリックするとウインドウ内で画像が拡大する「Lightbox2」の設置手順

クリックするとウィンドウ内で画像が拡大するLightbox2 (v2.51)の設置手順です。

DEMO

まずLightbox2のサイトに行きファイルをダウンロードします。 lightbox2download

Download

ダウンロードされました。
lightbox23file

lightbox2.51.zipを解凍してファイルを選別していきます。 file1

【使用するファイル】

■CSSフォルダ内
file2

・lightbox.css
・screen.css

■imagesフォルダ内
file3

・close.png
・loading.gif
・next.png
・prev.png

■JSフォルダ内
file4

・jquery-1.7.2.min.js
・jquery.smooth-scroll.min.js
・jquery-ui-1.8.18.custom.min.js
・lightbox.js

上記以外のファイルは使わないので削除してＯＫです。

では順番に進めていきます。

①gifデータをアップロードします。

■imagesフォルダ内の
・close.png
・loading.gif
・next.png
・prev.png

4つ全てをアップロードしてURLをメモしておきます。

②CSSとJavaScriptデータを書き換えます。

■CSSフォルダ内
・lightbox.css

上記のlightbox.cssをエディタで開き、
114行目と119行目の画像URLを①でメモしておいた自分の画像URLに書き換えて保存します。 file5

■JSフォルダ内
・lightbox.js

上記のlightbox.jsをエディタで開き、
51行目と52行目の画像URLを①でメモしておいた自分の画像URLに書き換えて保存します。 file6

③CSSファイルとJSファイルをアップロード。

■CSSフォルダ内
・lightbox.css（②で書き換えて保存したもの）
・screen.css

■JSフォルダ内
・jquery-1-7-2-min.js
・jquery-smooth-scroll-min.js
・jquery-ui-1-8-18-custom-min.js
・lightbox.js（②で書き換えて保存したもの）

以上6つのファイルをアップロードしてURLをメモしておきます。

最後に下記コードをHTMLの<head>～</head> 内に挿入します。
URLとパスは③でメモした自分のものに書き換えてください。これでLightbox2の設置は終わりです。

画像を拡大させたい場合は、
と記入します。

画像を連続して表示させたい場合は、グループ名を [ ] で囲みrel="lightboxの後に入れます。
画像名はグループ名の末尾に番号を振ったものに統一してください。

画像を表示させる順番は、画像ファイルの末尾の番号順となります。

例えばDEMOの夕日画像の場合は
・グループ名＝yuhi
・クリック後の大きい画像名＝yuni1、yuni2、yuni3、yuni4、yuhi5
・クリック前の小さい画像名＝yuhis1、yuhis2、yuhis3、yuhis4、yuhis5
といった具合です。

以上参考になれば幸いです。

この記事を読んだ人はこんな記事も読んでます