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

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

カルーセル CarouFredSel(1)

サンプル紹介

高機能なカルーセルプラグイン

カルーセルとは回転木馬(メリーゴーランド)のことで、WEBではサムネイルが列をなして移動していく演出を指しています。

耳慣れない言葉かもしれませんが、左図のようなサンプルを見かけたことがあるのではないでしょうか?画像をクリックするとサンプルを確認できます。このサンプルでは左右に付けた○ボタンをクリックしない限りサムネイルは移動しませんが、一定間隔で移動するような設定にすることもできます。

さらに画像ではなく文章(htmlタグも利用できます)を利用すればニュースティッカーも作成できます。
→サンプル:ニュースティッカー ※3秒間隔で切り替わります

記事を書き終えた感想

carouFredSelプラグインは、2章で紹介した「Nivo Slider」を開発したdev7studios社のプラグインなのですが、Nivo sliderとはスタンスが異なるのか、仕事でも利用しやすいプラグインとなっています

まずcssはプラグインに含まれておらず、自作しなければなりません。これは初心者にとっては不便かもしれませんが、web制作をしている方にとっては既存のcssを解読する必要はないので返って良いと思います(このサイトではcarouFredSelのcssについても説明しています)。説明のページがnivo sliderより充実している事からも、初心者向けのではなくweb制作者向けのプラグインという感じがします。

さらにスマートフォンでも利用できる(しかもフリック対応)のがステキだと思います。スマートフォンでの利用に関しても、このサイトで2ページ記事を書きました(左のメニュー参照)。

概要と組み込み

carouFredSel著作権:MIT and GPL
ダウンロードサイト:Circular, Responsive jQuery Carousel - CarouFredSel
※wordPress用のライセンスは有料です(→詳細ページ)。

htmlへの組み込みは以下の様に、jQuery同様scriptタグでリンクします。プラグインをダウンロードすると以下の「jquery.carouFredSel-6.2.1-packed.js」以外に「jquery.carouFredSel-6.2.1.js」が含まれるのですが、こちらは最小化していないコードなので実際には利用しません(開発やコードを解析したい時に利用して下さい)。

<script type="text/javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>

nivo sliderと異なりcssファイルは付属していません。

構文

「CarouFredSel」プラグインを組み込むと、以下のcarouFredSelメソッドが追加されます。

カルーセルの設定返値:jQueryオブジェクト
jQo.carouFredSel( )
※引数にオプションを設定することができますが、それは解説内で説明します。

解説

htmlとcssの確認

htmlの構成はNivo Sliderと同じです。サンプル(fred1/01.html)を開いてbody内の構成を確認して下さい(jQueryの設定はまだしていません)。まずカルーセル内で表示したいサムネイルを任意のid属性(サンプルではthumbNailsとしました)を設定したdiv要素内に配置します。
※以下のソースではサムネイルの数を3つだけですが、実際はアルファベット分の26あります

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

さらに外側にもdiv要素(class属性がthumb-wrapper)がありますが、これはカルーセルの大きさやデザインを設定するための要素です。サイズは以下の様にcssで設定されています。画像のサイズが50pxでマージンが5pxの計60pxなので、480px幅の要素内にちょうど8つ配置できる計算になっています。

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

このサンプルはhtmlとcssしか設定されていないので機能しません。次の項では、このサンプルにjQueryを追加していきます。

最小限の設定

サンプル(fred1/02.html)を開いてbody内の構成がfred1/01.htmlと同じ事を確認してください。このサンプルでは以下の様にjQueryが追加されています。セレクタに指定するのはサムネイルの親要素であるid属性がthumbNailsの要素であることに注意して下さい。
class属性がthumb-wrapperの要素はデザインの指定に利用しているだけです。

$(function(){
	$("#thumbNails").carouFredSel();
});

これだけでサムネイルが自動的にループしてスライドするカルーセルのコンテンツが作成できます。

カルーセルを応用するとスライドショーも作成できます(後で紹介する予定です)が、大抵はメニューとして利用します。ですのでdiv要素ではなくリスト要素を利用したサンプルも紹介しておきます。htmlやcssが異なるだけでjQueryを変更する必要はありません。→参考:サンプル(fred1/02b.html

<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>

オプションの設定

Nivo Slider同様にオプションはメソッドの引数にobjectオブジェクト利用することで設定します。以下の様にたくさんの設定があるので、今回は下表の赤字のオプションについて説明します。それ以外のオプションも次回以降に説明します。

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

サンプル(fred1/03.html)を開いてbody内の構成がfred1/02b.htmlと同じ事を確認してください。jQueryは以下の様に変更され、objectオブジェクト「carouObj」が作成され、これにcircularプロパティを追加して値をfalseにしています。この様にobjectオブジェクトをcarouFredSelの引数として利用することでオプションを設定できます。

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

circularプロパティをfalseにすると「zのサムネイル」の後に「Aのサムネイル」が続いて循環するのではなく、「zのサムネイル」まで表示すると逆方向にスライドして「Aのサムネイル」に戻るようになります

続いてサンプル(fred1/04.html)を開いてbody内の構成がfred1/03.htmlと同じ事を確認してください。jQUeryは以下のように変更され、infiniteプロパティが追加され、値にfalseが設定されています。

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

infiniteプロパティをfalseにすると最後のサムネイルの後に停止するようになります。但し、この設定はcircularプロパティがfalseの時にしか機能しません。実際にcircularプロパティの設定を外すと最後のサムネイルの後もループし続けます。→参考:サンプル(fred1/04b.html

メモ

謎の4px

今回作成したサンプルで気になったのですが、下のすき間(padding)が上よりも少し大きくなっています。プラグインを利用していないサンプル(fred1/01.html)では上下左右とも同じ大きさのpaddingです。

少し気になったのでcarouFredSelのソースを確認したのですが、指定した要素の外側に要素を追加していました。サンプル(fred1/test01.html)を開いてbody内の構成はfred1/02b.htmlと同じ事を確認して下さい。jQueryは以下の様に1行追加しています。

$("ul").carouFredSel();
$("ul").parent().css("background-color", "#f00");

parentメソッドcssメソッドを利用してセレクタで指定したul要素の外側の要素の背景色を赤くしています。htmlではul要素の外側はクラス属性がthumb-wrapperのdiv要素ですが、サンプルを確認すると分かるようにthumb-wrapperのdiv要素ではなく、carouFredSelプラグインによって追加された要素の背景色が赤くなります。そして、この赤くなった要素で下のpaddingが少し大きくなっています。

私が何か見落としているかもしれないのですが、根本的な対処法が分からなかったのでサムネイルの下マージンだけ1pxにして対応しました。→参考:サンプル(fred1/test01b.html

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

widthやheight、paddingはデザイン用ではありません(たぶん)

オプションのプロパティにはwidthやheight、paddingがあるのですが、上手く設定することができません...。サンプル(fred1/test02.html)を開いてbody内の構成が以下の様になっており、デザインを設定する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>

その代わりjQueryで以下の様に幅とパディングを設定しています。オプションでは背景色が設定できないので(この点からもデザインをオプションで設定するというスタンスではないことが分かります)、fred1/test01.htmlのテクニックを利用して背景色をグレーにしています(下表5行目)。

var carouObj = new Object();
carouObj.width = 480;
carouObj.padding = 10;
$("ul").carouFredSel(carouObj);
$("ul").parent().css("background-color", "#ddd");

しかしpaddingがうまく適用されず、画像が欠けてしまっています(heightの設定をしてもダメでした)。thumb-wrapperのような要素を利用した方が設定しやすいので、これらのプロパティは使わなくても良いと思っていたのですが、あとで非常に重要なプロパティであることが分かりました。

これはデザイン的な設定をするためのものではなく(デザインの指定はやはりthumb-wrapperのような要素で行います)、サムネイルの表示に関する設定で必要になります。これについては次回説明します。
というわけで、次回もcarouFredSelのオプションについて説明する予定です。