セクシーライトボックス

ajaxライブラリでもjQueryやprototypeには其の知名度で一歩遅れを取っている感のある mootool は、其の紹介を前者二者程目にすることも無いのですが、 当ブログにて屡参照させていただく phpspot開発日誌 では割と数多く取り上げられ、 表示法が新しくセクシーなLightBox「SexyLightBox」 では、prototypeのプラグインとして一世を風靡した、 ライトボックス タイプの機能をmootoolで実現するライブラリが紹介されれば、 今迄何度となく拝見はすれども取り上げることなく来ましたが、 遂には、写真家にては定番、 フィルムセレクト時のツールを思わせる其の命名も秀逸な当プラグインはAjaxにての定番、 有名処の登場とて、今回初めて取り上げてみましたのが coders.me:Sexy Lightbox v1 にて、画像表示の際の動作、切替時の動作等が、 云われてみれば少しセクシーになった気もする様な。

下に当ブログ上にも紹介サイトより拝借、 其の儘機能するべく努めてみました。 各サムネールをクリックすると拡大画像がエフェクトと共に表示される筈です。 拡大画像の右上の「Close」ボタン若しくは画像以外の部分をクリックすると元の画面に戻ります。
スポンサーリンク

個々のイメージ

基本的な機能が提供されています。 同頁上で実行するスクリプトで定義するクラスを指定することで、 エフェクトのカラーが変更され、上では白と黒が用意されています。

ギャラリー

アンカータグのrel属性を利用して、 ライトボックスのウィンドウの表示をした儘元画面に戻らず、 次の画像、前の画像を表示する機能を実現しています。

GIFアニメーション

GIFアニメーションでは透過属性が活きる様です。

上記にてご覧いただける様に、様々制限の多いブログ上には上手く機能の再現はならず、 又、例の当ブログ2008年7月15日アーティクル jQuery UI タブ切り替え機能改訂版 でも言及のFirefoxでは別ドメインの画像の表示が解決されておりませんので、 此処は雰囲気のみと思し召され、 更に正確な動作をご覧になりたい方は、 ライブラリ製作者の手に依るデモンストレーションが coders.me:Sexy Lightbox v1:デモページ に用意されています。