どれ使おう?モーダルウィンドウ(Lightbox 風スクリプト)を集めてみました
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。
さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。
基本的に、全て jQuery で動くものになっています。
最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。
超シンプルな軽量スクリプト leanModal
leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。
ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。
また、イメージギャラリーなどとしては使えないとのことです。
ちょっとした文章を表示するだけの場合などはこれで十分ですね。
そこそこ軽量、そこそこ機能的 Simple Modal
こちらも軽くシンプルな Simple Modal ですが、機能はひと通り揃っているので使える場面は leanModal よりも多いです。
また、このスクリプトの特徴として、ヘッダを掴んで移動させることができます。
5種類から雰囲気を選べる ColorBox
こちらはサイトの雰囲気に合わせてベースの雰囲気を変えることができます。
ボタンの感じやカラーなどが変更できるのが特徴です。
前にサイトを見たときは 4 つだったのですが、今見ると 5 つになってますね。これからも増えるんでしょうか。
ナビゲーションをボタンやサムネイルにもできる fancyBox
動きの良さなどで人気のあった、fancyBox がバージョンアップしていました。
今までの機能以外に、ボタンによるナビゲーションをつけることができたり、それとは別にサムネイルでのナビゲーションも可能です。
でもページ下の方の「Extended functionality」の辺りを試してみてください。
マウスホイールの動きにも対応していりもします。
※追記:こちら、商用利用有料となっていました。利用される場合はご注意ください。
ライブラリを選べる、楽しい動きの Sexy LightBox
こちらも動きの楽しさが特徴 Sexy LightBox ですが、このスクリプトの特徴はライブラリを選べること。
今現在、js ライブラリといえば jQuery が有名ですが、この Sexy LightBox は jQuery 以外に mootools でも使用可能です。
選択の柔軟性だけでなく、動きも面白いので一見の価値アリです。