KATALog

MooTools JavaScript Framework を使ったAjaxを紹介。

SqueezeBox – Expandable Lightbox (v1.1)

おなじみAppleのサイトで使われていたポップアップウィンドウです。
利点は、通常のポップアップではないので、ポップアップブロックされる心配がないこと。

Lightbox2.0と違う点は、画像だけでないく、htmlやform、YouTube Flashを表示できます。
iFrameを使えば何でも表示できます。

使い方は簡単。

まず、上記SqueezeBox – Expandable Lightbox (v1.1)のページから下記ファイルをダウンロードします。

• MooTools JavaScript Framework
  ここで必要なコードは「Element.Dimensions」「Fx.Tween」「Fx.Morph」「Selectors」「JSON」「DomReady (facultative)」※うまく動かない場合はすべてチェックするとうまくいきます。Download Optionsでは「YUI Compressor」を選択しましょう。最高圧縮ファイルにしてくれます。
• SqueezeBox.rar (Package with source and assets)
  これは、「SqueezeBox.js」「SqueezeBox.css」と画像パーツが入ったパッケージ。rarはちょっと特殊な圧縮ファイルなので、rarが解凍できる解凍ファイルを探してみてください。

あとは、下記の方法を参考にしてやってみよう。

• Ajax Requests htmlを表示できるタイプ
• From Elements フォームを表示できるタイプ
• IFrame Content iFrameを使って表示するタイプ（おすすめ）
• Single Images Lightboxのように画像を表示するタイプ
• Youtube Flash You Tube やFlashを表示させるタイプ

MooToolsは色々できるね〜。
面白い。
サンプルを紹介しているサイト発見。こちら

–制作メモ