livedoorうちでも使っていた Lightbox JS v2.0 の軽量版の Litebox は moo.fx ベースでしたが、moo.fx とおなじ Valerio Proietti 氏が作者(現在はたくさんの方が開発に加わっています)の MooTools という javascript フレームワークがベースになった Slimbox を発見しました。
Slimbox, the ultimate lightweight Lightbox clone - digitalia.be
このライブラリは MIT ライセンスのフリーウェアで、 MooTools 1.2 向けは 2009/05/14 時点での最新バージョンは1.7。(1.11向けは1.5)
Slimbox 自体のファイルサイズは約4KB。 MooTools とあわせても約16KB(圧縮が最高の時)と軽量になってます。
対応ブラウザは Firefox 1.5+, IEx 6+, Opera 9+, Safari 2+, Camino そして Google Chrome 。
うちでもさっそく Litebox からこの Slimbox に変えてみたところ、見た目はまったく Litebox と同じですがなんだか動きが Litebox の時より軽くなったような気がします。(中身は同じみたいだから気のせいかも)
とりあえずカンタンなデモと導入方法を書いてみましたので下からどうぞ。
デモ - Demo
Single Images
Image Set
*ここのデモではTooltipライブラリとの兼ね合いでタイトル文字が表示されなくなっていますが通常は表示されます。
使い方 - Usage
まず Slimbox - Download にアクセスして slimbox.zip をダウンロードします。
つぎに MooTools にアクセスし、downloadから、すべてダウンロードするか、 Core Builder から
- Native: All
- Class: All
- Elements: All
- Utilities: DomReady
- Fx: Fx.Tween, Fx.Morph (optionally Fx.Transitions)
上の項目すべてにそれぞれチェックを入れてファイルをダウンロードします。
*ファイルの圧縮（Compressor）はお好みで (高) YUI Compressor > JsMin Compression > No Compression (低) から選んでください。
つづいてそれぞれのファイルを任意の場所にアップロードし、 (X)HTML の <head>~</head> 間に
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/slimbox.js"></script>というように記述して javascript を読み込み、CSS も同じ <head>~</head> 間に
<link rel="stylesheet" href="/css/slimbox.css" type="text/css" />というように記述し読み込ませます。画像ファイルは CSS と同じ階層に置いて下さい。
これで導入完了です。実行させるには LightboxJS や Litebox とおなじように
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>とか
<a href="images/image-1.jpg" rel="lightbox[group]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[group]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[group]">image #3</a>というような形で書いていけばOKですので、今まで LightboxJS や Litebox を使っていてもそのまま移行することが出来ます。
以上です。
- 参考関連記事リンク
- Slimbox, the ultimate lightweight Lightbox clone - digitalia.be
- Lightbox JS v2.0
- Litebox- Same great taste, less calories
- mootools
- moo.fx - the next small thing
- slimbox with Mootools v1 « mootools forums
- mootoolsがversion1になって正式リリース。
- mootools version1を導入しました。
- mootools 1.0のプラグインやサンプル、デモなんかをまとめてみた。
- MooTools で Twitter のメッセージを表示させるサンプル。
![cie.buena.suerte[at]gmail.com](http://rosea.jpn.org/gmail.png "cie.buena.suerte[at]gmail.com"){kind=small}
ai Says...
#1 at November 09, 2006 01:39