Lightbox2

 Lightbox v2.0の設置方法を紹介します。

Lightboxとは

 Lightboxとは、javascriptライブラリで動作するプラグインで、画像のサムネイルをクリックすると画面上に画像の実サイズを表示します。
実際にはJavaScriptとスタイルシート(CSS)で動いています。
言葉で言うよりも動作を確認してもらった方が早いと思います。
下記の画像をクリックしてください、こんな感じです。

さくら

設置方法

① ファイルをダウンロードする。

 http://www.huddletogether.com/projects/lightbox2/にアクセスし、左メニューのDownloadからLightboxの最新バージョン(現時点では v2.03.3)をダウンロードする。

② ファイルを加工、選別する。

1.予期される不具合を解消しておくために、相対パスを絶対パスに書き換えます。

 jsフォルダ内のlightbox.jsの62・63行目(現在)を下記のように書き換えます。
(サーバーにアップロードする絶対パスに書き換えることをお勧めします)

書き換え前
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
書き換え後
var fileLoadingImage = "http://●●●●/images/loading.gif";
var fileBottomNavCloseImage = "http://●●●●/images/closelabel.gif";

2.同じ要領でCSSフォルダ内のlightbox.cssの画像(gif)相対パスも絶対パスに書き換えておきます。

(現時点では3ヶ所)

3.imagesフォルダ内のイメージ(image-1.jpgthumb-1.jpg)は、不要ですので削除しておいてください。

 ★ アップロード
js、css、imagesの各ファイルを、記述した絶対パスの位置にアップロードします。
 ★ HTMLへのコードの記述
<HEAD>~</HEAD>の中に下記を記述します。

<HEAD>
<script type="text/javascript" src="http://●●●●/js/prototype.js"></script>
<script type="text/javascript" src="http://●●●●/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://●●●●/js/lightbox.js"></script>
<link rel="stylesheet" href="http://●●●●/css/lightbox.css" type="text/css" media="screen" />
</HEAD>
(以上、4行を記述)

③ リンクの設定

 アンカータグ<A>内にrel="lightbox"を記述します。
(複数枚をスライドショーするにはrel="lightbox[▲▲▲▲]"とし、▲▲▲▲を統一された半角英数字で記述しグループ化します)
また、title="■■■■"を設定する事で、Lightbox上で説明を付す事も出来ます。

<A href="画像のパス" rel="lightbox" title="■■■■"><IMG SRC=""></A>

<A href="画像のパス" rel="lightbox[▲▲▲▲]" title="■■■■"><IMG SRC=""></A>
<A href="画像のパス" rel="lightbox[▲▲▲▲]" title="■■■■"><IMG SRC=""></A>
<A href="画像のパス" rel="lightbox[▲▲▲▲]" title="■■■■"><IMG SRC=""></A>
<A href="画像のパス" rel="lightbox[▲▲▲▲]" title="■■■■"><IMG SRC=""></A>

(もちろんアンカーの対象は文字等でもかまいません)

実行結果

SINGLE
GROUP rel="lightbox[sample]"
(以上は全て自己責任において行ってください)
2007/11/07