jQueryプラグインで彩る,ワンランク上のサイト制作

第2回 Lightbox風プラグインでダイアログ表示(1)

この記事を読むのに必要な時間:およそ 3 分

はじめに

第2回はLightbox風に画像などを表示するプラグインと,一歩進んだ利用方法を紹介します。

LightBoxは,今や同一ページ内で画像などを上乗せした形で表示させる表現効果の総称となっており,Javascriptの定番ライブラリの一つとなっています。

お薦めLightbox風プラグイン

Lightbox風の表現を実現するJavascriptライブラリは実際に探してみると,非常に多くのものを見つけることができます。この中からjQueryのプラグインとして開発され,さらに特徴的な以下のプラグインを3点ピックアップし,今回と次回,2回にわたり解説します。

jQuery Fancyzoom

jQuery Fancyzoomは画像表示に特化しており,拡大表示のアニメーションが非常に凝ったものとなっています。百聞は一見にしかずなので,あえてアニメーションの説明をここではしません。一度配布サイトのデモを見ていただければと思います。

ThickBox

ThickBoxは画像だけでなく,HTMLコンテンツも表示することができます。そのため,拡大画像の表示だけでなく,詳細情報のポップアップ表示,ログインなどの入力ダイアログにも用いることができます。

図3 ThickBox

図3 ThickBox

Shadowbox.js

Shadowbox.jsは,さらにFlashやムービーにも対応した,非常に多機能なライブラリとなっています。ただし,純粋なjQueryプラグインというわけではなく,Prototype,YUIなど複数のライブラリに対し,それぞれアダプタを用意した形を採っています。

図4 Shadowbox.js

図4 Shadowbox.js

著者プロフィール

iret R&D team

iret社内の有志によるインフォーマルな技術者集団。社内の各スペシャリストで構成され,Flash制作からサーバ運用まで,インターネットに関する様々な案件に対し最前線で活躍する。その傍ら,講師業や執筆業なども行っている。

URL:http://www.iret.co.jp/

コメント

コメントの記入