Slimboxを使ってみる

▼Slimboxここからダウンロードする事ができます。詳しい説明もここで見ることができます。(英語)
http://www.digitalia.be/software/slimbox

▼mootoolsはここからダウンロードすることができます。
http://www.mootools.net/

●設置方法
基本的には、Slimeboxのページを見ながらやればOKですが、読まずに適当にやるとおらいの様にはまる人もいると思いますので簡単に解説します。

１．
まず、Slimboxのページからslimbox.zipをダウンロードします。解凍してホームページの領域にアップロードします。

slimbox.zipを解凍するとjsフォルダとcssフォルダができるとのでそれをアップロードします。

２．
次にmootoolsのページからmootoolsをダウンロードします。
mootoolsのダウンロードには少しコツがいりますので注意してください。
mootoolsのダウンロードをするにはmootoolsのページに移動した後
a.上のdownloadのタブを選択します。
b.ダウンロードのページに進んだら以下をチェックします。
NativeのArray、 String、 Function、 Elementをチェックします。
Windowの Window.Base、 Window.Sizeをチェックします。
Effectsの Fx.Style、 Fx.Styles、 (オプションで Fx.Transitions)をチェックします。

チェックしたら一番下のdownloadをクリックしてダウンロードします。

３．
mootools.v1.00.js(バージョンによって今後変化すると思う)っていうファイルがダウンロードされるのでmootools.jsにリネームします。

４．
先にアップロードしたslimbox.jsと同じ場所にmootools.jsをアップロードします。
これで前準備はOK

５．
次にslimboxを使いたいページでSlimboxが使える様に仕込みます。
僕のつくったサンプルのページをみると一目瞭然だと思いますが、HTMLのヘッダー部分に以下のスタイルシートとjavascriptの読みこみ定義を追加します。

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

６．あとはイメージタグにrel属性で lightboxを追加するとOKです。 具体的は例は下の様になります。

<a href="CA350541.jpg" rel="lightbox" title="にゃーんこ１"><img src="CA350541t.jpg" border=0></a>

これで画像をクリックするとかっこよく画像が表示されるようになります。

ちなみにちなみにリンクタグにtitle属性でタイトルを指定しておくとSlimboxで画像を開いた時に下にコメントとして表示されます。

LightboxとSlimboxなど色々あるのでどれを使うか悩むかと思いますが、仕事などでWebアプリケーションの一部として使う場合はSlimboxがお勧めです。LightboxとSlimboxの大きな違いは、プログラムそのものより、ライセンスの形態にあると思います。LightboxはライセンスにコモンクリエイティブライセンスのAttributionを採用しているので、名前とリンクを利用サイトに表示する義務がありますが、Slimboxは比較的かなり制限の緩いMITライセンスである為、ほぼ無制限に利用することができます。(ソフトに組み込む場合などは、ソフトの重要な部分に著作権表示を埋め込む必要はある。)つまり、WEBデザイナーやWebアプリケーションのプログラマが自分のWebアプリケーションに取り込んで利用することができます。
(※ライセンスに関しての正確な情報はかくライセンスの管理元を参照してください。)