ページ)jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。公開[葛西秋雄,@IT]本連載の第4回「画像を美しく魅せる効果を加えるjQueryプラグイン3選」では、画像に各種エフェクトを適用する「Before/After」「panelGallery」「cycle」プラグインを紹介しました。本稿では、画像を回転させたり拡大するjCarousel、Zoomboxプラグインの使い方を説明します。本稿の後半ではjCarouselとZoomboxを組み合わせたサンプルについても説明します。jCarouselプラグインで画像を回転させるjCarouselプラグインを使用して、画像を水平方向/垂直方向にスライドさせながら自動的に回転させます。右矢印ボタンをクリックすると、画像が3個単位でスクロールした(画像をクリックすると、実際にサンプルが試せます)Webブラウザを起動してサンプルを表示すると、花の画像が3個表示されます。右矢印(→)をクリックすると、3個単位で画像をスクロールします。順に画像が切り替わります。jCarouselプラグインのサンプルでは、すべて下記サイトの画像を使っています。kwoutステップ1:CSSとライブラリをCDN経由で組み込むお好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、<head>要素に<link>要素と<script>要素を追加して、CSSとjQueryのライブラリを組み込みます。CDN経由で取り込むjCarouselプラグインのライブラリを取り込むjCarouselプラグインの最新版は、下記サイトからダウンロードできます。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。