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

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

2008年9月3日

iret R&D team

Webサイト制作, jQuery

ファイル, プラグイン, フォルダ

はじめに

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

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

図1　元祖Lightbox

お薦めLightbox風プラグイン

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

jQuery Fancyzoom: jQuery Fancyzoomは画像表示に特化しており，拡大表示のアニメーションが非常に凝ったものとなっています。百聞は一見にしかずなので，あえてアニメーションの説明をここではしません。一度配布サイトのデモを見ていただければと思います。
ThickBox: ThickBoxは画像だけでなく，HTMLコンテンツも表示することができます。そのため，拡大画像の表示だけでなく，詳細情報のポップアップ表示，ログインなどの入力ダイアログにも用いることができます。
Shadowbox.js: Shadowbox.jsは，さらにFlashやムービーにも対応した，非常に多機能なライブラリとなっています。ただし，純粋なjQueryプラグインというわけではなく，Prototype，YUIなど複数のライブラリに対し，それぞれアダプタを用意した形を採っています。

図4　Shadowbox.js

Webサイト制作, jQuery

iret R&D team

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

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

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

このエントリのトラックバック URI

お名前
メールアドレス
タイトル
コメント

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする，資格試験合格サイト「めざせ！情報処理試験パスサポ」が開設されました。

サクセスストーリーに続く，快適サーバー運用管理のヒント！: データの増大，煩雑な管理，システムダウン，セキュリティなど，迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。
gihyo.jp インフラエンジニア情報局: ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え，その魅力について多角的に紹介。
テストエンジニアステーション: いま，ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

※検索はページ右上の検索ボックスをご利用ください。

オープンソースの知的財産権/暗号輸出の違反防止ツール「Black Duck Suite」ご紹介セミナー（3/5，12）
矢野りんさんに学ぶ、“使える”デザイン基礎知識（3/6, 13）
最新ソフトウェアプロテクションの導入方法（3/8～4/16）
第16回エンバカデロ・デベロッパーキャンプバーチャルエディション（3/11，12）
Adobe FLASH PLATFORM CAMP Tokyo（3/16）
「組込みデータベースを利用した開発のポイントとDeviceSQLのご紹介」セミナー（3/17）

2010年版SEO体得講座: 本連載では，いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて，最新トレンドからすぐに使えるTipsまでを紹介します。
小型Linuxサーバの最高峰 OpenBlockS 600活用指南: 搭載メモリの増加，CPUクロックの向上など，あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から，活用するためのさまざまなノウハウを紹介していきます。
はじめMath! Javaでコンピュータ数学: プログラミング言語入門者向けに，知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で，即活用できる知識を目指します。
教科書には載っていないネットワークエンジニアの実践技術: ネットワークエンジニア，インフラエンジニアのトラブル対応には，時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について，実例を元に紹介します。
Googleケータイ，世に現る: 2008年9月，Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。
モバゲーオープンプラットフォームに挑戦！――面白法人カヤック流モバゲーオープンプラットフォーム企画と開発のイロハ: 2010年1月にリリースとなったモバゲーオープンプラットフォーム。その制作企業であるカヤックが，アイデアを企画に落とし込み，開発までのノウハウを紹介します。
プロトタイピングツールSketchFlowを用いた，Silverlightアプリ開発: SketchFlowプロトタイプ作成からアプリケーション開発までをExpression Blend 3を使って実践的に解説します。
Ubuntu Weekly Recipe: Ubuntuの強力なデスクトップ機能を活用するための，いろいろなレシピをお届けします。