このページの本文へ

jQueryでクールなくるくるウィジェットを作ろう (2/5)

2009年04月28日 11時00分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

「jCarousel」で縦型カルーセルを設置する

 作例として使うのは、前回、アフィリエイトリンクを追加した架空の書評サイト「東京ブックマニア」です。書評ページにカルーセルウィジェットを追加し、複数の書評を次々と読み進められるように改良しましょう。

作例

東京ブックマニアの書評ページ。右側にカルーセルウィジェットを追加し、複数の書評を切り替えられるようにしましょう


 カルーセルウィジェットをWebページに組み込むJavaScriptライブラリは、すでにいくつかネット上に公開されています。また、この連載でも過去に、オリジナルのライブラリを作成したことがありました(関連記事)。ところが、こうしたライブラリの多くは横方向のみで、縦方向に対応したライブラリはほとんどありません。

 今回はjQueryのプラグインである「jCarousel」ライブラリを使用します。jCarouselは横方向だけでなく、オプションで縦方向の動きにも対応できます。

jCarouselライブラリのページ

jCarouselライブラリのページ

 はじめに、jCarouselのWebサイトからライブラリをダウンロードしましょう。jCarouselライブラリは以下のページからダウンロードできます。ダウンロードファイルにはjQuery本体が含まれているので、別途ダウンロードする必要はありません。

http://sorgalla.com/jcarousel/

 ダウンロードは、トップページの「Download: jcarousel.tar.gz or jcarousel.zip」から、「jcarousel.zip」のリンクをクリックします。ダウンロードしたZIPファイルに含まれるファイル/フォルダのうち、動作に必要なものは以下のとおりです。なお、フォルダ構造は変更してもかまいませんが、「skin.css」と関連するPNG画像(カルーセルの↑↓ボタンなど)は同じフォルダに入れておかないと動作しません。

jCarouselライブラリのページ

ライブラリの動作に必要なファイル。ブルーに反転しているファイルが必要なファイルです


この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く