Lightbox2をSlimbox2に変更

Slimbox2モーダルウィンドウ
Slimbox2モーダルウィンドウ

Lightbox2のjQuery版Slimbox2に変更しました。導入は簡単で、

1.jquery.comDownloadからjquery.jsをダウンロードし、所定のフォルダ(ここではscript)へアップロード。

2.Slimbox 2, the ultimate lightweight Lightbox clone for jQuery · digitalia.beから、Slimbox 2.04をダウンロードし解凍。

3.解凍されたフォルダを、slimbox2にリネームしアップロード。

4.使用したいテンプレートのhead要素内に

<script type="text/javascript" src="http://<$mt:BlogHost$>/script/jquery.js"></script>
<script type="text/javascript" src="http://<$mt:BlogHost$>/slimbox2/js/slimbox2.js"></script>

と記述。

jqueryはgoogleのものを利用する手もあります。その場合は、後述のように組み込みます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>

5.CSSを

<link rel="stylesheet" href="http://<$mt:BlogHost$>/slimbox2/css/slimbox2.css" type="text/css" media="screen" />

または、スタイルシートで

@import url("http://<$mt:BlogHost$>/slimbox2/css/slimbox2.css") screen;

と記述。

あとはLightbox2関係の記述を削除して出来上がり。

Lightbox2からの乗り換えならこれでOKです。