litebox2.0の導入方法

サムネイルをクリックするとWebページに写真が重ね合わせて表示されるWebサイトをちまたでよく見かけませんか?それって、Javascriptのライブラリ「Litebox」なるものを使っているみたいです。僕もちょっとチャレンジしてみようかなぁなんて思ったりしてみます。

導入方法

1.ダウンロード

litebox2.0の公式Webサイトにアクセスします。
http://www.huddletogether.com/projects/lightbox2/

んで、次のスクリーンショットの通りにダウンロードしてみます

 

09072201.gif

2.アップロード

 

ダウンロードが完了すると「lightbox2.04.zip」というファイルが出現します。解凍するといくつかのファイルとフォルダがでてくるので、赤い線で囲っているフォルダだけをサーバーにアップロードします。

09072202.gif

3.headタグ内にスクリプトタグを挿入

headタグ内に次の四行を足してください。

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

4.拡大したい写真と関連付ける

(そのまま事例を使いますが。。。)次の様に記述します。

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

<a href="images/image-1.jpg" rel="lightbox"> 拡大用の写真へのリンク rel属性にlightbox

<img src="images/thumb-1.jpg" width="100" height="40" alt="" />  サムネイルの画像

これで完成!