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

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

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

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

DEMO
[Get Picture] [Get Picture] [Get Picture] [Get Picture] [Get Picture]

まず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

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

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

①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
といった具合です。

以上参考になれば幸いです。
関連記事

スポンサード リンク

TwitterやFacebookページでは日々うぇぶ小屋が気になった情報(ウェブ制作・運営、ブログの収益化に関する事が多い)をつぶやいていますのでこの機会にぜひ"フォロー"または"いいね"をよろしくお願いします。


Twitterアカウント → @webgoya
Facebookページ → webgoya
RSSフィードを配信しています → RSS購読はこちら

コメント一覧
この記事にコメントを残す
管理者にだけ表示を許可する

人気記事

最新のエントリー

カテゴリ

ライター募集!