スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTMLをLightboxで表示できるMOOdalBox

Lightboxを実現するためのJavaScriptプラグインはたくさんありますが、HTMLを表示できて動作が気持ちよく、実装も簡単となると「MOOdalBox」がいい感じです。

moodalbox

Closeボタンなどの画像をアップし、moodalbox.js、mootools.js、moodalbox.cssを読み込めば準備完了。




あとは、Lightboxで表示したいファイルへのリンクを設定し、rel属性で moodalbox と表示サイズを記述すればOK。スムーズに表示されます。
sample

もちろん、IE6や7でも表示可能なので実用性はあると思います。ただ、mootool.jsを利用するのでjQueryを読み込んでいる場合は注意が必要ですね。この辺りの使い分けはちょっと迷うところ。

ライセンスはMITとのこと。詳細やダウンロードは以下より。

MOOdalBox – an HTML Lightbox

関連するエントリー
カレンダーで日付入力ができるjQuery Date Inputが便利
画像のaltをかっこよく表示するCaptify.js

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。