Lightbox2の紹介

Javascriptによる画像表示制御のフリーソースです。
WEBサイトの視覚効果を期待できるDHTML、DOMなどというのでしょうか。

よくWEBサイトの画像をクリックすると、背景の明度が暗くなって、画像ウィンドウが表示されるWEBサイトなどがありますが、基本的にはLightboxであるでしょう。

一枚の画像から複数枚の画像まで、タグを編集するだけで簡単にWEBサイトに設置できます。

折角なので簡単にLightbox2の設置方法を記述します。

【Lightbox2設置方法】

1.huddletogether.comの以下URLからLightbox2のJavascriptライブラリをDL(ダウンロード)します。
http://www.huddletogether.com/projects/lightbox2/

2.Lightbox2を使用したいWEBページのheadタグ内に以下の記述をします。
ファイルのパスは配置したパスに修正してください

3.Lightbox2を使用したいアンカーテキストもしくはイメージをHTMLソースに記述します

●ひとつの画像の場合
＜ａ href="images/image-1.jpg" rel="lightbox" title="my caption">＜IMG src="images/sample01.png"

上のソースの場合、imagesフォルダにあるsample01.png画像をWEBページに配置して、クリックするとimagesフォルダのimage-1.jpgがウィンドウに表示されます

●複数画像の場合
＜ａ href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1
＜ａ href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2
＜ａ href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3

image #1のアンカーテキストをクリックするとimage-1.jpgが表示され、ウィンドウのNEXTをクリックするとimage-2.jpg、image-3.jpgと順に表示されます。

image #2をクリックするとimage-2.jpgから表示され、BACKでimage-1.jpg、NEXTでimage-3.jpgが表示されます。

結構以前から使用されているジャバスクリプトのライブラリですが、まだまだ使用しているサイトも多いようです。