デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:小ネタ系
2章:ショーケース系
3章:カルーセル系

カルーセル CarouFredSel(3)

概要と組み込み

carouFredSelは色々なオプションを選択することができます。ここでは前回に引き続きcarouFredSelのオプションについて説明していきます。

構文

前回に引き続きcarouFredSelのオプションを説明します。今回紹介するのは下表の赤字のオプションです。

カルーセルの設定返値:jQueryオブジェクト
jQo.carouFredSel( オプション )
※オプションはobjectオブジェクトで設定し、以下のプロパティを利用してカルーセルの詳細を操作します。
※プロパティには以下の種類があります。
・circular…trueでループ指定、falseでは先頭に戻る演出(デフォルトはtrue)
・infinite…上記circularの設定がfalseの時のみ利用できます。falseに設定すると最後で停止します。
・responsive…親要素のサイズに合わせて子要素のサイズを変更するか否か(デフォルトはfalse)
・direction…「left」「right」「up」「down」でスライド方向の設定(デフォルトはleft)
・width…幅の設定。数値の他に%やautoの設定が可能。variableを設定するとサムネイルの幅に応じて変化
・height…高さの設定。数値の他に%やautoの設定が可能。variableを設定するとサムネイルの幅に応じて変化
・align…「center」「left」「right」で整列位置の設定(デフォルトはcenter)
・padding…paddingの設定。配列を利用することで個別設定が可能
・synchronise…他のカルーセルと同期させる
・cookie…サムネイルの位置をクッキーに記憶させるか否か
・onCreate…カルーセルを作成した時に実行したい処理を設定
・items…サムネイルについての詳細設定
・scroll…スクロールについての詳細設定(次回以降で説明予定)
auto…自動スクロールについての詳細設定
prev…prevボタンの動作についての詳細設定
next…nextボタンの動作についての詳細設定
pagination…ページ表示についての詳細設定
・swipe…スワイプ処理についての詳細設定
・mousewheel…マウスホイールについての詳細設定

解説

next/prevボタンの設置(1)

まずはhtmlとcssの確認をします。サンプル(fred3/01.html)を開いてbody内の構成を確認してください。カルーセルに指定しているul要素の下にnext/prev用のdiv要素を追加しています。
本家のサンプルではa要素を利用していますが、アンカーでもリンクでもないのでシンプルにdiv要素にしてみました。

<div class="thumb-wrapper">
	<ul>
		<li><img src="../images/a.gif" width="50" height="50"></li>
		<li><img src="../images/b.gif" width="50" height="50"></li>
		<li><img src="../images/c.gif" width="50" height="50"></li>
	</ul>
	<div class="carouPrev"></div>
	<div class="carouNext"></div>
</div>

続いてcssを確認して下さい。マウスオーバー時の演出はcssで実現しています。利用している画像はnext.pngprev.pngで50px間隔でマウスオーバー用とでアクティブ用の画像が描かれています。

.carouPrev:hover, .carouNext:hover {
	background-position: 0 -50px;
}

またクラス属性thumb-wrapperの設定も以下の様に変更されています。まずボタンのスペースを確保するために横のpaddingを20pxに増やしました。さらにボタンがはみ出しても表示できるようにoverflowをvisibleに変更しています。またボタンの位置を自由に設定できるようにpositionの設定をrelativeにしました。

.thumb-wrapper {
	margin:20px;
	padding:10px 20px;
	background-color:#ddd;
	width:480px;
	overflow:visible;
	position: relative;
}

実際にnext/prevボタンにマウスオーバーして画像が切り替わることを確認して下さい。

また、このサンプルではnext/prevの機能を確認しやすいように自動的にサムネイルをスライドする機能を停止しています。jQueryが以下の様に記述されているのを確認してください。autoプロパティにfalseを設定することで、自動的にスライドする機能を停止することができます

var carouObj = new Object();
carouObj.auto = false;
$("ul").carouFredSel(carouObj);

このサンプルではnext/prevは機能しません。次項でオプションを設定して機能するようにします。
※autoについてはより詳細な設定ができるので、別の機会に再度説明します。

next/prevボタンの設置(2)

サンプル(fred3/02.html)を開いてbody内の構成がfred3/01.htmlと同じ事を確認して下さい。jQueryは以下の様に変更され、prevプロパティとnextプロパティが追加されています。これらの値にはnext/prevのdiv要素に設置したclass名を指定しています。

var carouObj = new Object();
carouObj.auto = false;
carouObj.prev = ".carouPrev";
carouObj.next = ".carouNext";
$("ul").carouFredSel(carouObj);

これだけで、next/prevボタンが機能するようになります。実際にクリックしてサムネイルがスライドすることを確認して下さい。

また、prevプロパティとnextプロパティはitemプロパティのようにobjectオブジェクトを設定することで様々な仕様を変更できます。サンプル(fred3/03.html)を開いてjQueryが以下の様に変更されていることを確認して下さい。prev/nextプロパティにobjectオブジェクトが設定されています。

var carouObj = new Object();
carouObj.auto = false;
carouObj.prev = {
	button:".carouPrev",
	items:2
};
carouObj.next = {
	button:".carouNext",
	items:2
};
$("ul").carouFredSel(carouObj);

buttonプロパティはボタンとして機能させる要素を指定します(つまりサンプルfred3/02.htmlと同じ機能になります)。itemプロパティは数値を設定することで、クリック毎にスライドさせるサムネイルの数を変更します。サンプルでは2が設定されているので、ボタンをクリックするサムネイル2つ分スライドします。

next/prevプロパティは他にも色々と設定できるのですが、利用する機会は少なそうなものが多いので省略します。詳細は本家サイトのconfigurationページを確認してください。

next/prevボタンの設置(3)

カルーセルをループさせない場合は、最初のページと最後のページが存在することになります。なので最初のページではprevボタンを、最後のページではnextボタンをディアクティブにする必要があります。そのためnext/prevボタンで利用している画像はnext.pngprev.pngにはでアクティブ用の画像を描いていたのです。

サンプル(fred3/04.html)を開いてjQueryが以下の様に変更されていることを確認して下さい。以前紹介したcircularプロパティとinfiniteプロパティをfalseにしてループせずに最後のページで停止するようにしました。

var carouObj = new Object();
carouObj.auto = false;
carouObj.circular = false;
carouObj.infinite = false;
carouObj.prev = ".carouPrev";
carouObj.next = ".carouNext";
$("ul").carouFredSel(carouObj);

まだディアクティブの設定をしていないので、最後のページに移動してもnextボタンは変化しません。しかしjQueryを追加する必要はありません。carouFredSelではディアクティブになったボタンにdisabledのクラスを設定するため、disabledクラスのcss設定を追加するだけです。

サンプル(fred3/04b.html)を開いてcssに以下の設定が追加されたことを確認して下さい。

.carouPrev.disabled , .carouNext.disabled  {
	cursor: default;
	background-position: 0 -100px;
}

結果として、最初のページではprevボタンが灰色に表示され最後のページではnextボタンが灰色に表示されます。

ページのインターフェイスを追加(1)

carouFredSelプラグインではページのインターフェイスを表示することもできます。
サンプル(fred3/05.html)のbody内の構成が以下の様に記述されている事を確認して下さい。ページのインターフェイスを表示するためには、あらかじめdiv要素を設定する必要があります。

<div class="thumb-wrapper">
	<ul>
		<li><img src="../images/a.gif" width="50" height="50"></li>
		<li><img src="../images/b.gif" width="50" height="50"></li>
		<li><img src="../images/c.gif" width="50" height="50"></li>
	</ul>
	<div class="carouPage"></div>
</div>

またcssの設定は以下の様にしました。ポイントは7行目のselectのクラス属性です。carouFredSelプラグインでは現在表示されているページ表示にselectのクラス属性を付加するため、このように設定しておくことで、現在のページは太字で表示されるようになります。

.carouPage {
	text-align: center;
}
.carouPage a {
	margin:5px;
}
.carouPage a.selected {
	font-weight:bold;
}

そしてjQueryは以下の様に記述されています。paginationプロパティにセレクタを設定することで、その要素にページのインターフェイスを表示できます。サンプルではクラス属性carouPageの要素を指定しています。これだけでサムネイルの下にページのインターフェイスが表示されるようになります。 autoプロパティやcircularプロパティは設定する必要ないのですが、これらをfalseにしたほうが機能を確認しやすいので設定しています。

var carouObj = new Object();
carouObj.auto = false;
carouObj.circular = false;
carouObj.pagination = ".carouPage";
$("ul").carouFredSel(carouObj);

ページのインターフェイスには画像も利用できるので次項で説明します。

ページのインターフェイスを追加(2)

ページのインターフェイスに画像を利用する場合もhtmlやjQueryを変更する必要はありません。
サンプル(fred3/06.html)を開いて、body内の構成とjQueryに変更がないことを確認して下さい。

変更したのはcssの設定で、以下の様にcarouPageのクラス属性内のa要素の背景に画像を利用しています。利用している画像はpage.pngで、14px間隔で通常の状態と選択された状態の画像が描かれています。

.carouPage {
		text-align: center;
}
.carouPage a {
	background: url(../images/page.png) no-repeat;
	width: 14px;
	height: 14px;
	margin: 10px 5px 0px 5px;
	display: inline-block;
}
.carouPage a.selected {
	background-position: 0px -14px;
}
.carouPage a span {
	display: none;
}

selectのクラス属性が付加された場合は背景画像を下に14px移動することで、画像を切り替えます。また数字のページ表記を表示しないようにcarouPageのクラス属性内のspan要素は表示しないようにします。このようにcarouFredSelではページのインターフェイスを簡単に追加することができます。

メモ

next/prevボタンとページのインターフェイス

next/prevボタンとページのインターフェイスを同時に利用することも可能ですが、サムネイルの数によっては思わぬ動作に戸惑います(論理的には正しいのですが...)。

サンプル(fred3/test01.html)を開いて、nextボタンをクリックしながらページのインターフェイスの動作を確認してください。問題なく機能します。しかし続けてprevボタンを1回クリックして下さい。ページのインターフェイスが4番目から2番目に移動したと思います

これはcarouFredSelのページの分け方の問題です。まず1ページのサムネイルをA〜H、2ページのサムネイルをI〜Pと把握し、ページのインターフェイスは「サムネイルの属するページの数」で切り替わります。分かりやすいようにnext/prevボタンで1つずつサムネイルをスライドさせるサンプルを用意しました。

サンプル(fred3/test01b.html)を開いてください。nextボタンをクリックして、どの時点でページのインターフェイスが切り替わるかを確認してください。2ページに属する(I〜P)のサムネイルの数が4つになった時に切り替わると思います。

それを踏まえ、サンプル(fred3/test01.html)の動作を確認して下さい。最後のページからprevボタンで戻った時に表示されているサムネイルは「K〜R」で2ページに属するサムネイルが5つと半数を超えています。そのため2ページのインターフェイスがONになるのです。というように論理的には正しいのです。

この問題が気になる場合は、サムネイルの数を調整します。サンプルでは1度に8つのサムネイルを表示しているので、8で割り切れる数のサムネイルを配置します。とはいえ都合良くサムネイルの数を揃えることは難しいので、透明のサムネイルを配置して調節しました。

サンプル(fred3/test02.html)を開きbody内li要素が6つ追加され、8で割り切れる32になっていることを確認して下さい。画像は透明gif(blank.gif)を配置しているので見えません。

<li><img src="../images/blank.gif" width="50" height="50"></li>

これで違和感は解消できると思います。次回も引き続きオプションの説明になる予定です。