30 Ajax Lightboxから使えそうなものを9個ピックアップ

通称『 Lightbox 』のまとめ記事ですね。
jQuery、prototypeの両方をカバーしている記事で、非常にボリュームのあるエントリーがあったのでご紹介。

使い易いLightbox

Lightboxって何？っという人がいたらまぁ以下の画像をクリックしてもらえればわかります。
（携帯ユーザーのアクセスが最近多いですが、携帯では確認出来ません）
とりあえずページを全て読み込んでからでないとJavaScript動かないようにしてるので、このブログのページを全て読み込んでからクリックしてみてくださいませ。


こんな感じでちょっとコジャレた味のある演出効果が得られるスクリプトですね。

興味のある人は試して見ると良いかもしれない。


１）Lightbox2

Lightbox系という一つのジャンルを生み出した最もオーソドックスなタイプ。
prototype.jsが必要になります。


２）Lightbox jQuery

prototype.jsではなくjQueryを利用したタイプのLightbox。


３）ColorBox

ページにアクセスし、左側のviewer demonstrationのサンプルを見てもらえるとわかる。jQueryが必要。CSSをいじれば、かなり色々な部分がカスタマイズできる性能を誇る。
ライセンスははっきり明記されており、利用に当たってはリンクが必要である事を忘れてはいけない。


４）Fancybox

jQueryが必要。オーソドックスに出来ていて、導入が比較的簡単です。
サンプルはこちらで。ライセンスはMITlicense。


５）prettyPhoto a jQuery lightbox clone

jQueryが必要。色々なマルチメディアに対応しているLightboxです。是非サンプルのFLASHで試して見てください。


６）LightView

細かい設定もきっちり説明されているため、カスタマイズ性に優れている。prototype.jsとscriptaculous.jsを使う。
ただカスタマイズできるのは良いけど、全て把握するのも時間がかかる。スライドショーなどの機能も実装されており、FLASH、QuickTimeなんかの再生も可能です。


７）jQuery UI dialog

ダイアログみたいなもの。jQuery、そしてjQueryUIが必要。
ページにアクセスし、右側のExamplesのしたあたりをいじればサンプルが拝めます。


８）ModalBox

上からニョきっと現れるダイアログ。日本では３年ほど前に『ホバーリンク』という名を付けられ、スパムサイトや、情報商材サイト、メールアドレスほしいほしいサイトなんかでもてはやされた。
この設置方法が２万で情報商材化されていたほど人気の動きです。今はどうかは知りませんが・・・。
prototype.js、scriptaculous.usが必要。


９）SimpleModal

サンプルはこちら。メッセージを受け付けるようなフォームに最適な感じ。作りがシンプルで扱い易いと言われています。こちらはjQueryが必要となります。

記事は以下からどうぞ

とりあえず使い易そうなのをピックアップしましたが、こうしたAjaxのエフェクトに興味がある方は是非。
30+ Useful Ajax Lightbox and Modal Dialog Solutions | Dottony

参考までに

jQuery、prototype、scriptaculous.usあたりが、今回の記事で必要となります。
各種サイトからダウンロードするか、もしくはGoogleからライブラリをJavaScriptで引っ張っちゃってください。

jQuery.js
prototype.js
scriptaculous.us

GoogleからJavaScriptをAPIで呼び出すなら
http://code.google.com/apis/ajaxlibs/

それでは、また！