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

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

カルーセル CarouFredSel(2)

概要と組み込み

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…マウスホイールについての詳細設定

解説

表示するサムネイル数の設定(1)

itemプロパティを利用すると、サムネイルについての様々な設定を変更することができます。
サンプル(fred2/01.html)を開いてbody内の構成は前回のサンプル(fred1/02b.html)と同じ事を確認して下さい。ただし前回のメモで確認したpaddingの問題を回避するため、以下の様に画像のマージンを変更しています。

li img {
	margin:5px 5px 1px 5px;
}

jQueryは以下の様に記述され、itemプロパティに3が設定されています。結果として、一度に表示されるサムネイルが3つだけになります

var carouObj = new Object();
carouObj.items = 3;
$("ul").carouFredSel(carouObj);

しかし、ここで気になるのがサムネイルの位置です。サムネイルが中央ではなく左寄りには位置されてしまいます。alignプロパティをcenterに設定しても中央には配置されません(そもそもデフォルトがcenterです)。
→参考:サンプルfred2/01b.html

var carouObj = new Object();
carouObj.align = "center";
carouObj.items = 3;
$("ul").carouFredSel(carouObj);

この問題を解決するのが、前回メモで説明したwidthの設定です。サンプル(fred2/02.html)を開いてjQueryが以下の様にwidthプロパティが追加されていることを確認して下さい。

var carouObj = new Object();
carouObj.width = 480;
carouObj.items = 3;
$("ul").carouFredSel(carouObj);

widthプロパティの480という値はデザインを設定しているクラス属性thumb-wrapperの要素のサイズと合わせています。結果として480pxの幅で3つのサムネイルが表示される様になりました。alignプロパティは設定していませんがデフォルトでcenterなので、中央揃えとなっています。

表示するサムネイル数の設定(2)

itemプロパティにはobjectオブジェクトを設定することもできます。サンプル(fred2/03.html)を開いてjQueryが以下の様に記述されていることを確認して下さい。

var carouObj = new Object();
carouObj.width = 480;
carouObj.items = {visible:3, start:2};
$("ul").carouFredSel(carouObj);

itemプロパティに直接objectオブジェクトが代入され、visibleプロパティとstartプロパティが設定されています。visibleプロパティは表示するサムネイル数の指定で、これまでitemプロパティに直接設定していた数と同じ役目になります

またstartプロパティを設定することで開始するサムネイルの番号を指定できます。番号は0から始まるのでサンプルのように「2」を設定すると3番目のCのサムネイルから始まります。またサンプル(fred2/03b.html)のように「random」と設定することで、毎回ランダムな場所から開始するようになります。

var carouObj = new Object();
carouObj.width = 480;
carouObj.items = {visible:3, start:"random"};
$("ul").carouFredSel(carouObj);

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

ニュースティッカーの作成(1)

carouFredSelはサムネイルのような画像だけでなくhtml要素も利用できるので、ニュースティッカーを作成する事もできます。サンプル(fred2/04.html)を開いてbody内の構成を確認してください。li要素に画像ではなくテキストを設定されています。このテキストを1つずつ切り替えることでニュースティッカーを作成します。

<ul>
	<li>ニュースティッカーも作成できます。</li>
	<li>itemプロパティを1に設定しています。</li>
	<li>alignプロパティをleftにしています。</li>
	<li>widthプロパティの設定も忘れないで下さい。</li>
</ul>

続いてjQueryを確認してください。itemプロパティに1を設定することで1つずつ記事を表示します。またwidthプロパティを480pxに設定し、alignプロパティはcenterではなくleftにして左揃えにしています。

var carouObj = new Object();
carouObj.width = 480;
carouObj.align = "left";
carouObj.items = 1;
$("ul").carouFredSel(carouObj);

しかしニュースの切り替わりが早すぎて読めません、ですので切替のタイミングを変更します。サンプル(fred2/05.html)を開いてjQueryが以下の様に変更されているのを確認してください。

autoプロパティにミリ秒(数値)を設定することで切り替える間隔を変更することができます。サンプルでは3000と設定しているので3秒でニュースが切り替わります。autoプロパティはitemプロパティのようにobjectオブジェクトを設定することで仕様を色々変更することができます(これについては別の機会に説明します)。

var carouObj = new Object();
carouObj.width = 480;
carouObj.align = "left";
carouObj.items = 1;
carouObj.auto = 3000;
$("ul").carouFredSel(carouObj);

ニュースティッカーの作成(2)

これまでのサンプルには少し気になる部分があります。それは、右からニュースが入ってくる速度と左へ出て行く速度が異なっている点です。これは左に出て行く時、li要素の幅に応じて移動先が調整されるためです(ちょうど隠れるような位置に移動するようになっています)。そのため出て行く場合は移動距離が短くなり、速度が遅く感じるのです。

これを修正するためにはli要素の幅を設定します。jQueryを変更する必要はありません。
サンプル(fred2/06.html)をli要素のcss設定が以下の様に変更されていることを確認して下さい。幅をクラス属性thumb-wrapperの要素と合わせることで、左へ出て行く速度と右から入ってくる速度が同じになります。

ul li{
	list-style:none;
	display:block;
	float:left;
	width:480px;
}

最後にスライドする方向を変えたサンプルを紹介します。サンプル(fred2/07.html)を開いてjQueryが以下の様に変更されているのを確認してください。deirectionプロパティを利用することでスライドする方向を設定することができます。サンプルでは「up」が設定されているのでニュースが下から登場するようになります(「down」を設定すれば上から登場するようになります)。

$(function(){
	var carouObj = new Object();
	carouObj.width = 480;
	carouObj.align = "left";
	carouObj.items = 1;
	carouObj.auto = 3000;
	carouObj.direction = "up";
	$("ul").carouFredSel(carouObj);
});

今回はこれで終わりですが、carouFredSelには他にもたくさんのオプションが設定できるので、次回も引き続きオプションについて説明していきます。