mootools用のスライドコンテンツ作成JavaScript (Smoothbox)

2007年7月3日(火) 10:40

Smoothbox
スライドショーのように写真やHTMLコンテンツ、Ajaxなどが利用できるのがSmoothbox。Thickboxのmootool版といったところ。動作にはアニメーション処理などにも定評のあるmootools.jsが必要になる。すでにmootoolsを導入している場合、簡単に機能拡張できる。

ダウンロードはリンク先のサイト上にある、js,css,gifの3種類のファイルをダウンロードして利用する。smoothbox.js、smoothbox.cssをHTMLヘッダで呼び出しを行えば利用する環境が整う。利用方法はリンクタグにclass="smoothbox"を追加するだけで済む。

写真スライドショーに限定されない
画像の拡大プレビュー以外の利用方法として、複数の写真をグループ指定することでスライドショーとして表示できる、また、インラインテキストやiframeコンテンツの表示ができるのでいろいろな場面で利用できる。

スライドショー表示中にコンテンツのスクロールやウインドウのリサイズを行っても、比較的スムーズに位置の調整が行われる。シンプルなデザインだがその分コンテンツのデザインに左右されずに利用できる。

関連する記事