« 連続した英数字も改行させる | トップページ | 最近のつぶやかれ状況 »

2012年4月 9日 (月曜日)

なんでもスライドアニメーション効果、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の実行直前にやっていました)。


|

« 連続した英数字も改行させる | トップページ | 最近のつぶやかれ状況 »

コメント

こんにちは

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

投稿: ユウぱぱ | 2012年4月14日 (土曜日) 午前 09時32分

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

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

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

投稿: ここの人 | 2012年4月14日 (土曜日) 午後 10時13分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/54430927

この記事へのトラックバック一覧です: なんでもスライドアニメーション効果、jQueryでカルーセル「carouFredSel」がすごいよ:

« 連続した英数字も改行させる | トップページ | 最近のつぶやかれ状況 »