ETERNITY DESIGN BLOG

jQuery edBox

いわゆるLightBox系プラグインです。無数にありますが、せっかく制作したので紹介します。
最初に作り始めたのはJSの勉強のためだったプラグインですが、気づけば面倒になってjQueryにがっつり頼る形に。

ローディング表示に、Activity Indicatorを使っていたりと、動作速度という面では、他に優れたプラグインがあるのかもしれません。
また、現時点のバージョンで完成とも思ってなく、引き続きブラッシュアップや機能追加続けていく予定ですが、JSの動作速度面での軽量化はよくわかってない部分が多いので、あまり期待できないかも。

サンプルはこちら

以下、制作し始めた理由や、ちょっとした特徴など。

jQuery Framerへと名称を変更しました。詳しくはこちら

制作の理由

特徴の1つでもあるのですが、他のLightbox系プラグインは書き出されるコードが好きじゃない。
古いものだと、角丸やドロップシャドウのためにdivタグが大量に使われていたり、そうでないものもなぜかdivタグで何重にも囲まれていたりと、シンプルなコードにしたいというのがあります。
もう、角丸やシャドウはCSS3でいいです。対応していない環境の方がバグです。
titleやdescriptionを非表示にしてしまえば、div2つに閉じるボタンのaタグ1つだけとなります。
(閉じるボタン消せます。また、imgやiframeは表示方法によっては利用されます。)

あと、まぁ、自分で作ればライセンス関係ないしね!ってところでしょうか。

特徴

Videoの表示にVideo.jsを利用しています。
これによりHTML5 Videoの表示が可能になっています。
MP4を用意すれば、対応環境ではHTML5で未対応環境ではFlashでの表示となり、ファイル1つなので楽になるのではないでしょうか。

あとは、書き出されるタグがシンプル+装飾用にタグを追加したいという場合にある程度対応できる形になっているので、デザインをカスタマイズしたいという場合、他のプラグインよりもやりやすいかも。

その他

jquery.animate-enhanced.jsを追加することでMobile Safari環境でハードウェアによる支援を得られるようになるので、軽快に動作します。ただし、現状のバージョンではisScrollオプションをtrueにしているとスクロールがおかしくなります。
jquery.animate-enhanced.jsはjQuery1.8では必要なくなるかも?

今後の機能追加の予定など

APIの実装(忘れてた)
モーションやイージングをカスタマイズできるようにしたい(まだ何も考えてないけど)

ABOUT ME

名古屋を中心に、フリーランスでホームページ制作してます。 デザイン・サイト制作・WordPress案件・Flash制作、JavaScript(jQuery)と幅広く対応可能です。 案件のご依頼・ご相談はCONTACTよりご連絡ください。

CATEGORIES

ARCHIVES

TAGS