うちでも使っていた 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 。
Google Chrome v3 ではうまく動作しません。 v2 や v4 の Beta では動くらしいのですが、 mootools に特にこだわりが無ければ v3 でも動く jQuery を利用した、 Slimbox2 を使った方が良いのかも。
Slimbox2 も使い方は下の説明の mootools.js のところが jquery.js に変わったくらいで、殆ど同じだと思います。
現在は別の lightbox ライブラリを使用していますので、挙動が若干違います……
うちでもさっそく 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 のメッセージを表示させるサンプル。
lightcyan
several line
division
pinkish line
flier
4seasons
xmas
clover
cheap paper
oblique
drops
dressy
burberry
border
plain
plastik
ink
rounded
15 Comment(s)
現在コメントを受け付けていません。
#1 ai says at November 09, 2006 01:39
テンプレート使わせていただいています。
以前LightboxJSの使い方を教えていただいて、ずっとやっていました。
今回slimbox.jsをやってみたのですが…
うまくいかないので、教えてください。
<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" />
も、HTMLの<head>~</head>間に加えれればよいのですよね？
slimbox.cssの画像のURLは、画像をおいた場所をかけばよいのですよね？
url(http://kimaro2.livedoor.biz/loading.gif) のように。
元に戻そうとしたところ、バックアップをとっていなくて元に戻らず、TOPのみLightboxJSがきかなくなってしまいました。
これも、どこを直せばよいでしょうか？
お手数ですが、教えてください。
宜しくお願いいたします。
#2 cie says at November 10, 2006 00:36
aiさんこんばんは。
遅ればせながら……第二子ご出産おめでとうございます。[はなび] お元気そうで何よりです。[にこっ]
[strong]> も、HTMLの<head>~</head>間に加えれればよいのですよね？[/strong]
ですね。ただ、説明不足だったんですが
[code]<script type="text/javascript" [color=#C30]src="/js/mootools.js"[/color]></script>[/code]ここの[em]src=""[/em]の中(slimbox.jsやslimbox.cssも)はアップロードしたURLを指定してあげないといけません。
[strong]> slimbox.cssの画像のURLは、画像をおいた場所をかけばよいのですよね？[/strong]
これもこの通りであってます。
[strong]> TOPのみLightboxJSがきかなくなってしまいました。[/strong]
トップページも一番上の記事を除けば動いているみたいですよ。
原因は画像タグに[strong]rel="lightbox"[/strong]が抜けてしまっている為だと思います。
ご確認ください。
#3 ai says at November 11, 2006 03:20
>遅ればせながら……第二子ご出産おめでとうございます。
ありがとうございます[にこっ]
親ばかブログに、拍車がかかりそうです。
>> TOPのみLightboxJSがきかなくなってしまいました。
>トップページも一番上の記事を除けば動いているみたいですよ。
>原因は画像タグにrel="lightbox"が抜けてしまっている為だと思います。
>ご確認ください。
これが実は……
IEでみたとき“のみ”そうなってしまったようです。
なにか、HTMLから削除してしまったのか。。。
ながくなるのですが、どうやらIEだと表示が変になってしまうようです。
しかし、cieさんのサンプルはきちんとみれます。
どうしてなのでしょうか？[汗]
（FC2でやってみました。お手数ですがそちらを見てみていただけますか？）
#4 ａｉ says at November 11, 2006 03:24
今回、ほかのブラウザで見てみてわかったのですが
サムネイルの周りにわくというか線が、IEだと表示されないのです。
これもなにかすれば、IEでも見えるようになるのでしょうか？
（あったほうがかっこいいな〜と思って）
いろいろ聞いてすいません。
教えていただけたらうれしいです。
宜しくお願いいたします。
#5 cie says at November 12, 2006 21:23
>>3
うーん。申し訳ないんですけどちょっと仰ってる事が理解できません。すみません。[泣]
一番上以外の画像はIEでもlightboxJSが動いているようですので、とにかく一番上の記事を編集して画像タグ内に[strong]rel="lightbox"[/strong]を追加すれば大丈夫ですよ。[さむあっぷ]
FC2のほうは問題無く動いているようですね。[うんうん]
>>4
このサムネイルの枠が表示されない現象はIE6のバグのようなものが原因なんですけれど、詳しく言うとややこしいんで、とりあえずHTMLテンプレートの先頭行にある
[code]<?xml version="1.0" encoding="EUC-JP"?>[/code]これを削除してください。
これでIE6でもサムネイルに枠がつくと思います。
#6 oss says at November 15, 2006 00:05
お伺いしたいんですがrel="lightbox"のリンク無しでjpgやgifのリンクを全てslimboxで開くようにすることは可能でしょうか？
またPREVやNEXTを使わないで画面をクリックすればclose出来るようにするとか…
時間があったら教えてくださいm(__)m
#7 cie says at November 15, 2006 01:36
ossさんはじめまして。
どちらも可能かとは思いますが、私の技術不足(＋ライブラリ自体を読んでない)があるので今の所何もお教えする事がありません。[汗]
色々参考記事を探してみると小粋空間さんでも[url=http://www.koikikukan.com/archives/2006/07/07-013507.php#c8942]同様のご質問[/url]をされているようなので、管理人のyujiroさんの回答(記事のエントリーかな？)を少し待たれるとよろしいかと存じます。
私もすこし研究してみますが余り期待しないでお待ち下さい。
#8 yoichi says at December 28, 2006 21:56
初めまして。こんばんわ。
liteboxについて色々ブラウジングしてましたら、こちらへたどり着き、早速Slimboxを使ってみました。実に軽快で気持ちいいって喜んでいたのもつかの間、Firefoxではうまく表示されるのにＩＥだとサイトを表示できないとのメッセージが出てしまいます。
typepadでＭＡＫＯＴＯ３様（http://makoto3.cocolog-nifty.com/makoto3/2006/09/__79a2.html）の手法でやっているのですが、もし原因についてお分かりであれば教えていただけませんでしょうか。
不躾なお願いで恐縮ですが、どうぞ宜しくお願いします。
#9 cie says at December 29, 2006 00:34
Yoichiさんはじめまして。こんばんは。
現在確認してみました所、どうやらライブラリを外していらっしゃるようで問題は発見できませんでした。
[blockquote]ＩＥだとサイトを表示できないとのメッセージが出てしまいます。[/blockquote]これは余り聞いたことが無い問題のようなのですが、どういったメッセージでしょうか。
記事中にも書いていますように、SlimboxはIE6以下のブラウザには対応していませんので、それかもしれません。
#10 yoichi says at December 29, 2006 07:48
早速のレス、恐れ入ります。
現在使っているＩＥはＩＥ６以上なので、問題はそこではないようです。
ＩＥで見れなくなる現象を回避するために一旦落としていましたが、再度アップしましたのでお手数ですがちょっと見ていただけますか？
で、問題のエラーメッセージなのですが具体的には「インターネット サイト http:yoichi.typepad.jp/blog/ を開けません。操作は中断されました」とページロードが終了すると表示され、強制終了させられます。
どうぞよろしくお願いします。
#11 cie says at December 29, 2006 12:17
Yoichiさん、わざわざすみません。
うちのIE6でも同様のエラーを確認しました。
うちでは強制終了ではなく「ページを表示できません」(タイトル部は「サーバーが見つかりません」)と表示されました。
どうやらページのロードが終りそうな頃に出るようですね。
ちょっと覗かせてもらっただけなのでなんとも云えないんですけれども、考えられるとすれば他にお使いのjavascriptとの兼ね合いでエラーが出るのかもしれません。
あと、特に変化は無いかもしれませんが[url=http://blog.livedoor.jp/cie/archives/50629870.html#usage]使い方[/url]に書いてあるように[code]<head> ~ </head>[/code]の間に<script>タグや<link>タグを入れてみてはどうでしょうか。
#12 yoichi says at December 29, 2006 15:59
年末お忙しい中、本当にご親切にありがとうございます。もしかするとDoctypeがおかしいのかもしれませんね。ちょっとゆっくりと調べてみます。
色々お騒がせしました。状況がはっきりしましたらご報告いたします。多謝です！良いお年を。
#13 yoichi says at December 30, 2006 22:06
自己レス、失礼します。
結局小生のスキルではDoctype宣言を直すことができないので、今回はThickbox 2.1を導入することにいたしました。
色々ありがとうございました！
#14 cie says at December 30, 2006 23:01
Yoichiさんこんばんは。
今回はお力になれずスミマセンでした。[泣2]
#15 あんへむ says at September 13, 2008 06:54
困ってた問題がおかげで解決しました。
本当に感謝です。
趣味のサイトで恐縮ですが、よかったら遊びに来てください。