このページの本文へ

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

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

文●古籏一浩、ASCII.jp

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

HTMLタグを設定する

 jCarouselで縦方向のカルーセルを機能させるには、回転表示させたい画像をHTMLのリスト項目(<ul> <li>要素)でマークアップします。<ul>タグにはID名と2つのスタイルシートクラス名(「jcarousel」と「jcarousel-skin-tango」)を設定します。通常のカルーセルなら、表示させたい画像の数だけリスト項目を繰り返せば基本的にはOKです。


<ul id="bookmenu" class="jcarousel jcarousel-skin-tango">
<li><img src="icon/dummy.gif" width="80" height="80" alt=""></li>
<li><img src="icon/1.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/2.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/3.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/4.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/5.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/6.jpg" width="80" height="80" alt=""></li>
<li><img src="icon/dummy.gif" width="80" height="80" alt=""></li>
</ul>

 ただ、今回の場合は3つの画像を縦に並べて表示し、このうち真ん中の画像に対応したコンテンツを左側のメインカラムに表示するため、最初と最後の項目には真ん中よりも上もしくは下に画像が移動しないように固定する必要があります。そこで、固定用のダミーとして、透明のGIF画像を設定しておきます。

ダミーを設定する

カルーセルの最初と最後にはダミー画像を設定して固定します


 HTMLタグの準備が終わったら、実際にカルーセルが動作するようにスクリプトを設定します。jcarouselは<ul>タグに対して、 jcarousel() とすれば動作しますが、デフォルトでは、↑↓を1回クリックするとまとめて3項目が横スクロールしてしまいます。そこで、1回のクリックで1項目が縦にスクロールするようにオプションを設定しましょう。

 縦方向のカルーセルにするには、 vertical: true 、1回の矢印クリックで移動する項目数を scroll : 1 として jcarousel() のオプションに指定します。具体的には以下のように書きます。


$("#bookmenu").jcarousel({ vertical: true, scroll : 1 });


この連載の記事

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

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

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

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