リッチな画像表示ができるLightbox2の導入方法:Javascript
目次
ページ内で画像を拡大表示できるやつ
最近いろいろなサイトでみかける画像を ページの前面で表示するやつ。
コレ↓(クリックしてみてください)


導入方法と手順
Lightbox2というJavascript、導入が難しいのかなと思ったら以外に簡単。
- まずダウンロードして解凍
- 解凍後ファイルを任意のディレクトリにアップロード
(例:/js/lightbox/に解凍したjs,css,imageフォルダをアップロード)
- 使用するページのヘッダーに以下のコード記述
<
script
type
=
"text/javascript"
src
=
"/js/lightbox/js/prototype.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"/js/lightbox/js/scriptaculous.js?load=effects,builder"
></
script
>
<
script
type
=
"text/javascript"
src
=
"/js/lightbox/js/lightbox.js"
></
script
>
<
link
rel
=
"stylesheet"
href
=
"/js/lightbox/css/lightbox.css"
type
=
"text/css"
media
=
"screen"
/>
- lightbox.js内のアイコン画像のパスを変更
light.jsの49,50行目あたり fileLoadingImage:
'/include/js/lightbox/images/loading.gif'
,
fileBottomNavCloseImage:
'/include/js/lightbox/images/closelabel.gif'
,
- light.css内のアイコン画像パスを変更
lightbox.cssの16,17行目あたり #prevLink:hover, #prevLink:visited:hover { background: url(/js/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/js/lightbox/images/nextlabel.gif) right 15% no-repeat; }
- 表示対象画像にリンクする<a>タグ内にrel="lightbox"追記
<
a
href
=
"test.jpg"
rel
=
"lightbox"
><
img
src
=
"thumbnail.jpg"
/></
a
>
たったこれだけでリッチなサイトに変身です。
写真にグループ名を付けて、同じフォルダ内にある画像を次々めくったり、タイトルをつけたりすることもできます。
< a href = "test.jpg" rel = "lightbox" title = "タイトル名" >写真を見る</ a > |
< a href = "image1.jpg" rel = "lightbox[グループ名]" >写真1</ a > < a href = "image2.jpg" rel = "lightbox[グループ名]" >写真2</ a > < a href = "image3.jpg" rel = "lightbox[グループ名]" >写真3</ a > |
MovableType用のプラグインがある
MovableTypeを使用している方はプラグイン「LightBox2MT」を使用すると、画像挿入時は<a>タグ内にrel="lightbox"を自動的に入れてくれます。
ただし、画像をアップロードする際に「画像をポップアップで開く」を選択しているとLightbox2が使えません。
プラグインの配布は製作者の以下ブログ内からダウンロードできるので、ダウンロードしたら解凍し、/mt/plugins/内にアップロードするだけで使えます。