ウェブデザイナーの日記

さいきんコッソリLightboxモドキのJavascriptをバージョンアップしてそのダウンロードページをつくったのですが↓

http://1-pixel.com/s-box.html

これはこれでいいのですが、こんどはそれをすごく単純化して、もうただモーダルのまんなかにjpgが表示されますよっていうだけのヤツをつくってみました。プレビューどころか矢印は出ないし、背景は角丸でないcssによる普通のヤツです。機能を絞り込んでぎゅーぎゅーに小さくしたら5kb弱になりました。minifiedで4kbになりました。SimpleModal1.3が8kb（minified時）なので合わせて12kb。とても軽量。あ、あとjQuery1.3.2ももちろん要ります。こちらは56kbありますが、既にjQueryを入れているのであれば、+ 12kbだけです。

デモです。

いくら軽量といっても、機能があまりにドシンプルで「せめて矢印くらい出せ！」といわれそうですが、まぁこういうのも使うときがあるだろうし、これをベースに機能を付け足していくという目的でもよいかなと思います。

よかったらお使いくださいませ。右クリックで保存してください↓

• s-box.light.src.js (5kbのソースコード)
• s-box.light.min.js (4kbのminified版)
• ajax-loader.gif (3kbのアニメgif)

使用ライブラリのダウンロード先です↓

注意！jQueryは1.3.2、SimpleModalは1.3、それ以外のverでは動作確認してないです。

jQuery 1.3.2
SimpleModal 1.3

スクリプト冒頭にいくつかの設定箇所があります。ソースコードの方にコメントしておいたのでそちらをご覧ください。

使い方

1. 当スクリプトの設定をする。ローダーのgifのパスだけは必須なんでとりあえずそれだけしてください。
2. jQuery, SimpleModal, 当スクリプトの順序でhtmlのヘッダにincludeする。
3. モーダルにしたいaタグのリンクに"rel=lightbox"と記述する。デモのソースを見てもらえばわかると思います。
4. おしまい。

てわけでした。

さて、これは機能を絞り込んだライト版ですが、s-box.jsてのを使うとモーダル内で次/前画像のプレビューが出るとか、あなたの独自ロゴを配置できるといった機能を使えます。そちらもMITライセンスなので、興味のある方はどうぞお試し下さい↓

http://1-pixel.com/s-box.html

『Javascript』カテゴリのエントリ

• jQuery :: 画像のリロード
• Javascript :: ecl.jsにながらくお世話になりました
• jQuery :: ネストしたリスト + ui.sortable.js
• jQuery :: event delegationてナニ？
• jQuery :: safariとappend関連メモ
• jQuery :: チェックボックスが並んだテーブルをjQueryでどーこーするサンプル
• jQuery :: セレクタを使いこなす10のTraversing機能
• jQuery Tips 20選
• Javascript :: いろんな書き方のパス文字列をurl文字列に変換/統一する関数

コメント・プリーズ！

お名前 (your name)

(required)

url

(optional) ※公開されます。

メールアドレス (email)

(optional) ※公開されません。管理者にだけわかります。

コメント (comment)

(required)

 クッキーにお名前、url、メールアドレスを保存する。

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『&lt;』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

ADD YOUR COMMENT! / コメントする