Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

Lightbox JS

画像を演出で見せるテクニックにLightbox JSがあります。
Lightbox JSのオフィシャルサイトからダウンロードすることができます。
ダウンロードしたファイルを解凍し、「js」、「images」、「css」の3つのフォルダをサーバーにアップします。

CSSとJavaScriptをXHTMLの<head>~</head>内に記述します。

<link rel="stylesheet" href="<$MTBlogURL$>lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/lightbox.js"></script>

サムネイル用とフルサイズ用の2つの画像を用意し、img要素でサムネイル用画像を貼り付け、フルサイズの画像へのリンクを張ります。

<a href="<$MTBlogURL$>photo/plant001.jpg" rel="lightbox[group1]" title="plant"><img src="<$MTBlogURL$>photo/plant001_thumb.jpg" width="80" height="80" alt="plant" class="thumb" /></a>

a要素にrel属性を追加しlightboxと記述すると、Lightbox JSが利用できるようになります。
lightboxのあとに[group1]と記述すると、「PREV」や「NEXT」ボタンが用意され、グループ名を同じにした画像を連続で表示させることができます。
title属性を指定すると、左下にキャプションが表示されます。

lightbox