- 索引
-
- └ プラグイン目次
- 1章:小ネタ系
-
- ├ イージングの追加
- ├ 要素のセンタリング
- ├
- ├ マウスホイール
- ├ スクロールバー(1)
- ├ スクロールバー(2)
- ├ スクロールバー(3)
- ├ スクロールバー(おまけ)
- └ アニメの一時停止/再開
- 2章:ショーケース系
- 3章:カルーセル系
カルーセル CarouFredSel(2)
概要と組み込み
carouFredSelは色々なオプションを選択することができます。ここでは前回に引き続きcarouFredSelのオプションについて説明していきます。
構文
前回に引き続きcarouFredSelのオプションを説明します。今回紹介するのは下表の赤字のオプションです。
- カルーセルの設定返値:jQueryオブジェクト
- jQo.carouFredSel( オプション )
解説
表示するサムネイル数の設定(1)
itemプロパティを利用すると、サムネイルについての様々な設定を変更することができます。
サンプル(fred2/01.html)を開いてbody内の構成は前回のサンプル(fred1/02b.html)と同じ事を確認して下さい。
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には他にもたくさんのオプションが設定できるので、次回も引き続きオプションについて説明していきます。
次のページ:carouFredSel(3)