QUOIT Blog

【作ってみた】Lightboxを作ってみた

この記事は6年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。

いつも拝見している 5509 さんのブログで、「誰が使うの?何の役にも立たないjQueryプラグイン10選」というエントリが公開されています。
独創的な発想に満ちたjQueryプラグインで、たぶん使うことはないけど多いに笑えます。

その中の一つ、「これからの新標準LightBox jDTLightBox.js」というLightboxのプラグインがあります。
こちらもご多分に漏れず大変ユニークなプラグインなのですが、そういえば自分でLightbox的なものを作ったことがないなと思い、これを参考に作ってみることにしました。

デモ
ダウンロード(140KB)

特徴

かなりシンプルなLightboxです。jQuery利用。
画像(jpg,gif,png)とiframeコンテンツに対応してます。
内容のサイズを取得して、表示サイズが自動で調整されます。
表示の際のアニメーションはありません。
(コメントアウトしてあるところをいじるとアニメーションのヒントになるかも?)

使い方

1)シンプルな利用法(画像の場合)
(HTML)

画像を表示

(JavaScript)

$("#hoge").qBox();

2)オプションを指定
(HTML)

画像を表示

(JavaScript)

$("#hoge").qBox({
   href:"http://quoit.jp/",
   width:500,
   height:400
});
実装課題

・iframeコンテンツを表示した際の履歴の管理。
 →iframe内でsubmitイベントが発生したときに制御しきれていない
 →完全に制御する必要に迫られなければ問題はないのだろうか。。

ご注意

このスクリプトが原因で発生した不利益、不具合に関しての責任は一切負いません。
ご利用にあたっては自己責任でお願い致します。

ライセンス

ライセンスはjDTLightboxを継承してMITです。
基本的にどんなに改造してもらっても構いません。
構造がシンプルなので、初めてLightboxを作ってみようという方にはオススメだと思います。

問題点、改善要望は下記コメント欄かTwitterまで。

1 comment for “【作ってみた】Lightboxを作ってみた