今更ながら、画像のポップアップにLightbox2を導入しました。

1.Lightbox2からダウンロードしたファイルを解凍し、フォルダごとアップロード。たたし解凍したフォルダ名はLightboxと変更してありますのでそれを前提にお読みください。なお、解説サイトによってはバージョンの違いから、記述にちがいがあるので注意してください。今回の解説は2.04をもとに書いています。

2.HTMLヘッダテンプレートにスクリプトを読みこむコードを記述します。

<script type="text/javascript" src="<$mt:BlogURL$>lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<$mt:BlogURL$>lightbox/js/lightbox.js"></script>

3.HTMLヘッダテンプレートにスタイルシートを読み込むコードを記述します。

<link rel="stylesheet" href="<$mt:BlogURL$>lightbox/css/lightbox.css" type="text/css" media="screen" />

または、メインのスタイルシートにインポート形式で追加する方法でも。

@import url("<$mt:BlogURL$>lightbox/css/lightbox.css") screen;

4.ポップアップ画像のa要素内に ref="lightbox"を追加します。

<form mt:asset-id="315" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a rel="lightbox" href="http://www.shikidahironori.jp/img/20091024ananbujpg.jpg"><img alt="サムネイル画像" src="http://www.shikidahironori.jp/assets_c/2009/10/20091024ananbujpg-thumb-240x180-315.jpg" width="240" height="180" class="mt-image-none" style="" /></a>
</form>

5.lightbox.jsの49行目、50行目の画像へのパスを書き換えします。

オリジナルの

fileLoadingImage:        'images/loading.gif',     
fileBottomNavCloseImage:  'images/closelabel.gif',

を、

fileLoadingImage:        'http://www.shikidahironori.jp/lightbox/images/loading.gif',     
fileBottomNavCloseImage:  'http://www.shikidahironori.jp/lightbox/images/closelabel.gif',

と書き換えますが、絶対パスで次のようにしてもかまいません。

fileLoadingImage:        '/lightbox/images/loading.gif',     
fileBottomNavCloseImage:  '/lightbox/images/closelabel.gif',

6.サンプル

http://www.shikidahironori.jp/blog/2009/10/post_307.html

以上です。

関連エントリー

• LightBoxで画像のタイトルを表示する
• LightBoxプラグインで自動化