画像や動画を綺麗に回転/拡大するjQueryプラグイン：CSSの書き方も分かるjQueryプラグイン実践活用法（5）（3/3 ページ）
jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。
ステップ3：XHTMLで骨格を定義する
<body>要素に<div#container>要素を追加したら、<div#content>要素を入れ子にします。<div#content>に、<a>要素を追加したら<img>要素を入れ子にします。
<img>要素のsrc属性には、サムネイルのパスを設定します。<a>要素のhref属性にはフルサイズの画像のパスを設定します。rel属性には固定値「zoombox」を設定します。
複数の画像をグループ化するときは「[gallery]」のように任意のグループ名を追加します。title属性を追加するとタイトルが拡大に表示されます。同様の手順で<a>要素を追加したら、合計3個の画像を定義します。
<div id="container">
<div id="content">
<a href="images/pics/1.jpg" rel="zoombox[gallery]" title="title #1">
<img src="images/pics/1t.jpg" alt="" />
</a>
</div>
</div>
ステップ4：Zoomboxプラグインを組み込む
<head>要素に<script>要素を追加したら、次のようなコードを追加してZoomboxプラグインを組み込みます。
<script type="text/javascript">
$(function() {
zoombox.init();
});
</script>
Zoomboxのinit()メソッドを実行すると、jQueryのセレクタ「$("a[rel^='zoombox']")」で対象となる<a<要素を検索してクリックイベントを登録します。クリックのイベントハンドラでは、サムネイルをズームボックスに拡大表示します。
YouTubeの動画を拡大させるには
YouTubeの動画をZoomboxに表示するには、<a>要素のhref属性に動画のリンクを設定します。<img>要素のsrc属性には、動画のサムネイルのURLを設定します。
<a href="http://www.youtube.com/watch?v=TDJT6VGz-6s" title="jQuery Internals (1/5) - John Resig - jQuery Camp 2008 (MIT) " rel="zoombox[youtube]"> <img src="http://i1.ytimg.com/vi/TDJT6VGz-6s/default.jpg" alt="" /> </a>
サムネイルをクリックすると、ズームボックスにYouTubeの動画が表示されます。中央の再生ボタンをクリックすると、動画が再生されます。この動画では、12歳の天才少年が大人にjQueryの講義をしています。
プラグインを組み合わせて画像・動画を回転＆拡大
最後に、jCarouselとZoomboxプラグインを組み合わせてYouTubeのサムネイルと動画を表示します。動画のサムネイルはjCarouselプラグイン、動画はZoomboxプラグインで表示します。
サンプルを実行すると、動画のサムネイルがjCarouselに表示されます。
両端の矢印ボタンをクリックすると、サムネイルが左右にスクロールします。任意のサムネイルをクリックすると、Zoomboxに動画が拡大されます。中央の再生ボタンをクリックすると動画が再生されます。
ここでは、jQueryの開発者John Resig氏の講演動画を選択しています。ズームボックス下の両端に表示されている左右の矢印ボタンをクリックすると、拡大した状態で動画を切り替えができます。
この講演は5個の動画に分割されているので、1/5の動画を見終わったら、右矢印をクリックして2/5、3/5、4/5、5/5の順に動画を切り替えます。ズームボックスを閉じるには右上の「X」をクリックします。
ステップ1：CSSとライブラリをCDN経由で組み込む
<head>要素に<link>要素と<script>要素を追加したら、前出のjCarouselとZoomboxの作成手順を参考にしてCSSとjQueryのライブラリを組み込みます。
ステップ2：XHTMLで骨格を定義する
<body>要素に<div#container>を追加したら<div#grid><div#listimg>要素を入れ子にします。>div#listimgにul.picturelist>要素を入れ子にしたら、<li.thumb>要素を追加してYouTubeの動画のリンクとサムネイルを定義します。
<a>要素のhref属性には動画のリンクを設定します。rel属性には「zoombox[youtube]」を設定して動画をグループ化します。<img>要素のsrc属性には、動画のサムネイルのURLを設定します。
<div id="container">
<div id="grid">
<div id="listimg" class="jcarousel-skin-tango">
<ul class="picturelist">
<li class="thumb">
<a href="http://www.youtube.com/watch?v=TDJT6VGz-6s"
title="jQuery Internals (1/5) - John Resig - jQuery Camp 2008 (MIT) " rel="zoombox[youtube]">
<img src="http://i1.ytimg.com/vi/TDJT6VGz-6s/default.jpg" alt="" />
</a>
</li>
</ul>
</div>
</div>
</div>
ステップ3：プラグインを組み込む
<head>要素に<script>要素を追加したら、次のコードを入力してjCarouselとZoomboxプラグインを組み込みます。
<script type="text/javascript">
$(function() {
$('#listimg').jcarousel();
zoombox.init();
});
</script>
ECサイトなどで使うと、効果的！
サンプルでは、動画を表示していますが、実際のWebサイトでjCarouselとZoomboxを組み合わせて商品を掲載すると、非常に効果的です。ぜひ、ECサイトなどで積極的に活用してください。
なお、今回作ったサンプルは、こちらから直接ダウンロードできます。
著者プロフィール
中小企業などの情報化推進の相談を受けるかたわら、Access、SQL Server、OracleなどのデータベースとWebアプリケーションの書籍執筆を手掛ける。
マイクロソフトのVisual Developer - ASP/ASP.NETのMVPとして著者Webサイトで活躍中。
主な著者：「CSS + jQuery Webデザインテクニック」（ビー・エヌ・エヌ新社）
「jQuery+JavaScript実践リファレンス―Webデザインを強化するための」（ソシム）
「ASP.NET 3.5+jQuery Ajax実践サンプル集」（秀和システム）
Copyright © ITmedia, Inc. All Rights Reserved.