なんでもスライドアニメーション効果、jQueryでカルーセル「carouFredSel」がすごいよ

 画像とかがスライドするアニメーションする効果を「カルーセル(回転木馬)」というだそうだ。jQueryとそのプラグインを使えばこれがカンタンに実現できると知る。これはぜひ試したい。
 そんなjQueryプラグインの中でも機能が多く、有名なのが「carouFredSel」というもの。
circular, responsive jQuery carousel --- CarouFredSel 5.5.0circular, responsive jQuery carousel — CarouFredSel 5.5.0はてなブックマーク - circular, responsive jQuery carousel --- CarouFredSel 5.5.0

 なんでも、画像(img)やリスト(li)以外のHTML要素なんでもカルーセル化できるんだそうだ。ほんとに? そんなカンタンにできんの? ということで試してみた。

できあがったcarouFredSelのサンプル


 指定したタイミングで自動スクロールするほか、ボタンを加えることも可能(自分でボタンを配置して、そのidをスクリプト側で指定する)。なかなか見栄えのいいものができあがる。
 ここで試したのは、Amazonのランキングブログパーツ。各商品はdivで囲まれており、全体もまた別のdivで囲まれている。でもって、それぞれにclassがついているので、うまいことスタイルシートを書いたり、スクリプトで指定したりするという具合。
 divが列挙されたような構成でも問題なく動作することに驚き!
 これなら、ほんとになんでもカルーセル化できるんじゃないですかね。
 自分で1から書いたHTMLなら、合わせて書くこともできるわけですが、配布されてるブログパーツだとそうもいかない。でも、これだけ自由度が高いなら、carouFredSelで対応できるブログパーツは多いんじゃないかと想像してます(もちろん、Flashとかはだめですけどね)

基本的な使い方

 では、carouFredSelの使い方の基本をちょっとメモ。
 まずは、カルーセル化するHTMLの構造が以下だとします。

<div id="all">
<div class="each">要素 1</div>
<div class="each">要素 2</div>
<div class="each">要素 3</div>
<div class="each">要素..</div>
</div>

 divが縦に並ぶ場合ですね。
 この場合、個々の要素(classがeach)が、全体を示すdiv(idがall)で囲まれています。carouFredSelではこの外側にあるallを指定することになります。各要素が「div」ではなく「li」でも、スクリプトは同じ書き方でOK。
 当然ながら、jQuery本体とcarouFredSelは各自自分のブログとかサイトにアップロードして使ってください。以下では、jQuery本体はGoogleに上がってるやつを使ってみました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="アップロード先のパス/jquery.carouFredSel-5.5.0-packed.js"></script>
//
<script type="text/javascript">
(function(){
$("#all").carouFredSel({
items: 5, //表示する数
direction: "up", //方向 up/down/right/left
auto: 7000, //切り替えまでのタイミングms
scroll : {
items: 5, //スクロールする個数
duration: 1000,	//スクロールにかかる時間ms
fx: "scroll",
pauseOnHover: true //カーソルがあるとスクロール停止
}
});
})();
</script>

今回の設定時のポイントとか

 今回使ったブログパーツでは、商品は最大20個まで表示できるので、画面に収まるようスタイルシートを調整する必要があります。あらかじめ5個ぶんのスペースをwidthやheightで指定して、はみ出すぶんは「overflow: hidden」とかしてやればいい。個々の商品枠ももちろん、サイズを指定しないといけない。
 スクリプト側で指定すれば、自動的に全体の幅や高さは設定してくれるんだけど、最初に20個全部が表示されてから縮む、みたいな動作をするので、やはりあらかじめスタイルシートで指定しておくほうが無難。大きさを固定しないとほかの要素のデザインにも影響あるしね。ということで。
 また、スクリプトのロードと、ブログパーツの表示のタイミングによっては、carouFredSelがセレクタを拾えない場合があります(一般的なブログパーツはだいたいそんな感じかも)。そのため、ブログパーツが生成するdivの存在を確認した時点でトリガーされるようにするといった小技(?)を使ったりしてます。
 jQueryを使うので、ブログなんかに載せる際には、ブログサービスが使ってるjQueryとバッティングしないようにとかいう配慮も必要。そのへんがまだ把握できてないので、おかしなコードになってる可能性もあるんですが。ここでのサンプルはHTMLファイルを作ってからアップロード、iframeで読み込んでます(ローカルでテストしてOKだったからといってブログの投稿でうまくいくとは限らないため、手っ取り早くテストしたファイルをそのままアップしました)。

でもって、今回のサンプルのコード

 スタイルシートは、使用するブログパーツによって変わってくると思うので、ここでは掲載は割愛。
 以下にはcarouFredSelを動かすためのスクリプトのみ掲載しておきます。

<script type="text/javascript">
(function(){
jQuery.noConflict();
setTimeout(function() {
if(!jQuery('div.fun9list').length) { //ブログパーツの出力完了確認
setTimeout(arguments.callee, 100);
} else {
jQuery("div.fun9list").carouFredSel({ //カルーセル化する部分(外枠)のセレクタ指定
items: 5, //表示する数
direction: "left", //方向
auto: 7000, //切り替えまでのタイミングms
prev: '#btnPrev', //id="btnPrev"をもつDOM要素にprevを設定
next: '#btnNext',//id="btnNext"をもつDOM要素にprevを設定
scroll : {
items: 5, //スクロールする個数
duration: 1000,	//スクロールにかかる時間ms
fx: "scroll",
pauseOnHover: true //カーソルがあるとスクロール停止
}
});
}
}, 100);
})();
</script>

 とりあえず、これで動いてますが、保証するものではありません。
 なんとかうまくいったので、調子に乗ってサイドバーの右側にも同じようにカルーセル化した別のブログパーツを載せたりしてます。どうですかね? ちゃんと動いてますかね。「気になったメモ」というのがそれです(追記:サイドバーのカルーセル化はもうやめました。追記おわり)。

参考にした記事

 carouFredSelについて日本語で書かれた記事を探すと、「公式サイトにはこんなサンプルもありますよ」という話ばかりで、実際に試した話が意外と見つからない。
 そんななか、役立ったのがこれ。
carouFredSel の表示方法を詳細に設定したい - とあるWebデザイナーの逆引き辞典PluscarouFredSel の表示方法を詳細に設定したい – とあるWebデザイナーの逆引き辞典Plusはてなブックマーク - carouFredSel の表示方法を詳細に設定したい - とあるWebデザイナーの逆引き辞典Plus

 参考にさせてもらいました。ありがとうございます!

追記:2012年4月16日
 プラグインの読み込みのタイミングの問題なのか、エラーが出ることがある模様。
 Zenbackとの兼ね合いのような気がしないでもないですが、jQueryを読み込んだ直後にnoConflictするようにして様子を見てみます(これまでは、carouFredSelの実行直前にやっていました)。

コメント

  1. ユウぱぱ より:

    こんにちは

    少し質問させてくださいませ
    ココログフリーでもJQueryを導入する事は出来ますか?

  2. ここの人 より:

    >ココログフリーでもJQueryを導入する事は出来ますか?

    以前、試した際はできましたよ。

    最近のココログフリーのテンプレートがどうなってるかどうかわからないので、確かなことは言えないのですが。