P_Morris&JWW | Lightbox2の覚え書き

Lightbox2の覚え書き

テンプレートを変えてみました。

同時に、追加設定やらプラグインを弄っていたのですが・・
忘れてるものですね。(^^ゞ
そこで、サムネイル画像を綺麗に表示するスクリプト「Lightbox2」の設置方法を覚え書きして置きます。

Lightbox2 とは、サムネイル画像がこんな感じに表示されます。

複数貼り付けた画像では、スライドショーっぽく移動させることもできます。

１．Lightbox2 をダウンロードして解凍。

２．表示を安定させる為に lightbox.js の画像パスをフルパスに書き換えた方が良いみたいです。

－－６５～６６行目－－

var fileLoadingImage = "images/loading.gif";

var fileBottomNavCloseImage = "images/closelabel.gif";

これを ↓

var fileLoadingImage = "http://▲▲/images/loading.gif";

var fileBottomNavCloseImage = "http://▲▲/images/closelabel.gif";

３．css、images、js の各フォルダをSerene Bachのindex.htmlと同じディレクトリにアップロードする。
４．テンプレートの<head>～</head>部分に以下を追加

<script type="text/javascript" src="{site_top}js/prototype.js"></script>

<script type="text/javascript" src="{site_top}js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="{site_top}js/lightbox.js"></script>

<link rel="stylesheet" href="{site_top}css/lightbox.css" type="text/css" media="screen" />

５．エントーリの記述部分の aタグにrel属性で lightboxを追加する。上の画像を例にした記述例はこんな感じ。

<a href="http://www.tmk-s.com/sb/img/img43_DSC_0087.jpg" rel="lightbox"><img src="http://www.tmk-s.com/sb/img/thm43_DSC_0087.jpg" class="thumb" alt="DSC_0087.jpg" title="DSC_0087.jpg" width="120" height="80" /></a>

６．画像をスライドショーのように、クリックするたびに次々と切り替えるには、画像にリンクする a タグに　rel="lightbox[●●●]"　とする。
　※ ●●●は、半角英数字で同じ文字列とする。ちなみに上の場合は「huyu」としてある。

--補足--
rel 属性を自動的に付与することが出来るSerene Bach用のプラグイン「Addrel」がsideblue weblogに有ります。

ん？　sb開発研究所のイメージヘルパーも有るんだ。ちょっと研究しないと・・・

2008.03.06 Thursday 22:20
Category: -
comments(1)
trackbacks(0)
編集

Comments

cg-of: 2008/03/07 12:52 PM; いいねー　頂きました。
　ありがとうございました。m(__)m

Trackbacks

Trackback Url: