CarouFredSel(2)概要と組み込みcarouFredSelは色々なオプションを選択することができます。ここでは前回に引き続きcarouFredSelのオプションについて説明していきます。前回に引き続きcarouFredSelのオプションを説明します。今回紹介するのは下表の赤字のオプションです。)※オプションはobjectオブジェクトで設定し、以下のプロパティを利用してカルーセルの詳細を操作します。※プロパティには以下の種類があります。・circular...trueでループ指定、falseでは先頭に戻る演出(デフォルトはtrue)・infinite...上記circularの設定がfalseの時のみ利用できます。falseに設定すると最後で停止します。・responsive...親要素のサイズに合わせて子要素のサイズを変更するか否か(デフォルトはfalse)・direction...「left」「right」「up」「down」でスライド方向の設定(デフォルトはleft)・width...幅の設定。数値の他に%やautoの設定が可能。・height...高さの設定。数値の他に%やautoの設定が可能。・align...「center」「left」「right」で整列位置の設定(デフォルトはcenter)・padding...paddingの設定。するサムネイル数の設定(1)itemプロパティを利用すると、サムネイルについての様々な設定を変更することができます。サンプル(fred2/01.html)を開いてbody内の構成は前回のサンプル(fred1/02b.html)と同じ事を確認して下さい。前回のメモで確認したpaddingの問題を回避するため、以下の様に画像のマージンを変更しています。5px;}jQueryは以下の様に記述され、itemプロパティに3が設定されています。結果として、一度に表示されるサムネイルが3つだけになります。3;$("ul").carouFredSel(carouObj);しかし、ここで気になるのがサムネイルの位置です。サムネイルが中央ではなく左寄りには位置されてしまいます。alignプロパティをcenterに設定しても中央には配置されません(そもそもデフォルトがcenterです)。3;$("ul").carouFredSel(carouObj);この問題を解決するのが、前回メモで説明したwidthの設定です。サンプル(fred2/02.html)を開いてjQueryが以下の様にwidthプロパティが追加されていることを確認して下さい。3;$("ul").carouFredSel(carouObj);widthプロパティの480という値はデザインを設定しているクラス属性thumb-wrapperの要素のサイズと合わせています。結果として480pxの幅で3つのサムネイルが表示される様になりました。alignプロパティは設定していませんがデフォルトでcenterなので、中央揃えとなっています。表示するサムネイル数の設定(2)itemプロパティにはobjectオブジェクトを設定することもできます。サンプル(fred2/03.html)を開いてjQueryが以下の様に記述されていることを確認して下さい。start:2};$("ul").carouFredSel(carouObj);itemプロパティに直接objectオブジェクトが代入され、visibleプロパティとstartプロパティが設定されています。visibleプロパティは表示するサムネイル数の指定で、これまでitemプロパティに直接設定していた数と同じ役目になります。startプロパティを設定することで開始するサムネイルの番号を指定できます。番号は0から始まるのでサンプルのように「2」を設定すると3番目のCのサムネイルから始まります。サンプル(fred2/03b.html)のように「random」と設定することで、毎回ランダムな場所から開始するようになります。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にして左揃えにしています。1;$("ul").carouFredSel(carouObj);しかしニュースの切り替わりが早すぎて読めません、ですので切替のタイミングを変更します。サンプル(fred2/05.html)を開いてjQueryが以下の様に変更されているのを確認してください。autoプロパティにミリ秒(数値)を設定することで切り替える間隔を変更することができます。サンプルでは3000と設定しているので3秒でニュースが切り替わります。autoプロパティはitemプロパティのようにobjectオブジェクトを設定することで仕様を色々変更することができます(これについては別の機会に説明します)。3000;$("ul").carouFredSel(carouObj);ニュースティッカーの作成(2)これまでのサンプルには少し気になる部分があります。それは、右からニュースが入ってくる速度と左へ出て行く速度が異なっている点です。これは左に出て行く時、li要素の幅に応じて移動先が調整されるためです(ちょうど隠れるような位置に移動するようになっています)。そのため出て行く場合は移動距離が短くなり、速度が遅く感じるのです。これを修正するためにはli要素の幅を設定します。jQueryを変更する必要はありません。サンプル(fred2/06.html)をli要素のcss設定が以下の様に変更されていることを確認して下さい。幅をクラス属性thumb-wrapperの要素と合わせることで、左へ出て行く速度と右から入ってくる速度が同じになります。li{list-style:none;display:block;float:left;width:480px;}最後にスライドする方向を変えたサンプルを紹介します。サンプル(fred2/07.html)を開いてjQueryが以下の様に変更されているのを確認してください。deirectionプロパティを利用することでスライドする方向を設定することができます。サンプルでは「up」が設定されているのでニュースが下から登場するようになります(「down」を設定すれば上から登場するようになります)。"up";$("ul").carouFredSel(carouObj);});今回はこれで終わりですが、carouFredSelには他にもたくさんのオプションが設定できるので、次回も引き続きオプションについて説明していきます。