JavaScript/jQuery_Cycle_Pluginでメインビジュアルを作っていくチュートリアル http://www.ark-web.jp/sandbox/wiki/7258.html

[edit]

概要

jQuery のスライドショー用の plugin に、jQuery Cycle Plugin があります。

▼公式サイト (公式のデモもこちらで確認できます)
http://jquery.malsup.com/cycle/

30個近くのエフェクトをデフォルトで持っており、
ナビゲーションも自分で記述しなくても空のdivタグを渡してやれば
自動的に生成してくれる楽チンプラグインなので利用されている方も
多くいるかと思います。

今回は、この jQuery Cycle Plugin をサイトのメインビジュアルとして
下記のようなものを作っていく課程をチュートリアル的にまとめました。

[edit]

今回作る完成品

http://okra.ark-web.jp/~takemura/public/js/jquery_cycle/
今回作る完成品

[edit]

目次

[edit]

jQuery Cycle Plugin のエフェクトを探す

[edit]

仕様の検討

まずは、どのようなメインビジュアルにするかを検討しましょう。

+-------------+-------------+-------------+
|       |       |       |
|  画像   |  画像   |  画像   |
|       |       |       |
|       |       |       |
+-------------+-------------+-------------+
[  1  ] [  2  ] [  3  ] [  4  ] [  5  ] [  ||  ]

とりあえず、そのような仕様にしましょう。

では、1セット毎チェンジするエフェクトをどのようにするかを検討します。

公式サイトでも「 jQuery Cycle Plugin - Effects Browser 」という
各エフェクトを確認できるサンプルがあります。

ただ、これは画像1枚で1セットなのでちょっとイメージしづらいです。
そこで、↓こちらにサンプルを用意しました。

[edit]

エフェクト一覧のサンプルについて

エフェクトのチョイスをする前に、このエフェクト一覧のサンプルについて、どのように実装されているかを説明します。

3枚が 1セットなので、下記のように ul li タグの入れ子構造になっています。
画像の下に id="nav" の部分に各セットのページが表示させるようにしています (実際に値をセットするのは、cycleプラグインがやってくれます)
あと、class="nav2" の部分にループ停止・ループ再開のナビゲーションを用意。CSSでデフォルトで「ループ再開」側は非表示にしておきます。

 <div>
   <ul class="visual">
   <li class="visualArea">
     <ul class="carousel">
     <!-- 1 -->
     <li><ul>
       <li><img src="samples/cal1-1.jpg" alt="画像1-1" /></li>
       <li><img src="samples/cal1-2.jpg" alt="画像1-2" /></li>
       <li><img src="samples/cal1-3.jpg" alt="画像1-3" /></li>
       </ul></li>
     <!-- 2 -->
     <li><ul>
       <li><img src="samples/cal2-1.jpg" alt="画像2-1" /></li>
       <li><img src="samples/cal2-2.jpg" alt="画像2-2" /></li>
       <li><img src="samples/cal2-3.jpg" alt="画像2-3" /></li>
       </ul></li>
     <!-- 3 -->
     <li><ul>
       <li><img src="samples/cal3-1.jpg" alt="画像3-1" /></li>
       <li><img src="samples/cal3-2.jpg" alt="画像3-2" /></li>
       <li><img src="samples/cal3-3.jpg" alt="画像3-3" /></li>
       </ul></li>
     <!-- 4 -->
     <li><ul>
       <li><img src="samples/cal4-1.jpg" alt="画像4-1" /></li>
       <li><img src="samples/cal4-2.jpg" alt="画像4-2" /></li>
       <li><img src="samples/cal4-3.jpg" alt="画像4-3" /></li>
       </ul></li>
     <!-- 5 -->
     <li><ul>
       <li><img src="samples/cal5-1.jpg" alt="画像5-1" /></li>
       <li><img src="samples/cal5-2.jpg" alt="画像5-2" /></li>
       <li><img src="samples/cal5-3.jpg" alt="画像5-3" /></li>
       </ul></li>
     </ul></li>
   </ul>

   <div class="controller">
     <ul id="nav">
     </ul>
     <ul class="nav2">
       <li><a href="javascript:void(0)"><img class="stop"  src="images/btn-stop.jpg" alt="ループ停止"/></a></li>
       <li><a href="javascript:void(0)"><img class="start" src="images/btn-play_on.jpg" alt="ループ再開"/></a></li>
     </ul>
   </div>
 </div>

JavaScript側は、jQueryとjQuery Cycleの両方を読み込んで、
ul li 入れ子構造の親の方を $('.carousel').cycle() で指定します。
オプションの「fx」「pager」「timeout」は、下記公式サイトの「jQuery Cycle Plugin - Option Reference 」を参照。

「stop」と「start」の部分は、[ || ]をクリックしたら自動ループを停止とかいう部分の実装です。
「pause」と「resume」のコマンドも Option Rference 参照。

 <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
     $('.carousel').cycle({
         fx: '<?php echo htmlspecialchars ($_GET['act']); ?>',
         pager:  '#nav',
         timeout: 5000
     });

     $('.stop').click(function() { 
         $('.carousel').cycle('pause'); 

         $(".start").css("display", "block");
         $(".stop").css("display", "none");
     });

     $('.start').click(function() { 
         $('.carousel').cycle('resume'); 

         $(".start").css("display", "none");
         $(".stop").css("display", "block");
     });
 });
 </script>
[edit]

エフェクトの検討

jQuery Cycle Plugin のエフェクト一覧 にコメントとして
「チラツク」など、メモを残しておきました。
あくまで、私の環境で(WindowsXPのデスクトップマシンで)確認した場合の感想です。

エフェクト同士は組み合わせできないの? と思ったのですが、可能なようです。
実装方法は次で解説するとして、どういうエフェクトにするかを決めましょう。

5セットをそれぞれ別々のエフェクトで表示するようにしてみます。

fade → turnUp → slideY → toss → curtainY → 最初へもどる

[edit]

エフェクト同士の組み合わせ

では、エフェクトの方針が決まったので、エフェクト同士の組み合わせの実装をしてみます。

HTML側は特に修正は無し。
JavaScript側の $('.carousel').cycle() のオプションが変わります。

timeoutFn というイベントハンドラに、自作の処理を設定します (イベントハンドラの仕様は、jQuery Cycle Plugin - Option Reference を参照)
options.nextSlide には次に表示されるページ番号が入ります。ちなみに、現在のページ番号は options.currSlide に入ってます。

 $(document).ready(function() {
     $('.carousel').cycle({
         pager:  '#nav',
         timeout: 5000,
         timeoutFn: function(currSlideElement, nextSlideElement, options, forwardFlag) {
             var effectList = new Array('fade', 'turnUp', 'slideY', 'toss', 'curtainY');
             options.fx = effectList[options.currSlide];
             return 5000;
         }
      });

     $('.stop').click(function() { 
         $('.carousel').cycle('pause'); 

         $(".start").css("display", "block");
         $(".stop").css("display", "none");
     });

     $('.start').click(function() { 
         $('.carousel').cycle('resume'); 

         $(".start").css("display", "none");
         $(".stop").css("display", "block");
     });
 });

ここまでで↓このようになります。

http://okra.ark-web.jp/~takemura/public/js/jquery_cycle/effect.html
jQuery Cycle Plugin 5秒で自動的にループするサンプル

[edit]

各画像をクリックできるようにする

最後に、メインビジュアルの各画像をクリックできるようにしてみましょう。

例えば、各画像がイチオシカテゴリーだったとして、クリックでそのカテゴリーに遷移するようなイメージです。

クリックしたら画面遷移は単純にHTMLの各画像を a タグで囲むだけです。
a タグに class="fade" をセットして、マウスオーバーでJavaScriptで該当画像の透明度を下げます。

 <script type="text/javascript">
 $(document).ready(function() {
     $('.carousel').cycle({
         :
         略
         :
     });

     // マウスオーバーでエフェクト
     $("a.fade img").hover(function () {
         $(this).stop().fadeTo(200, 0.8);
     }, function () {
         $(this).stop().fadeTo(500, 1.0);
     });
 });
 </script>
:
略
:
  <div>
   <ul class="visual">
   <li class="visualArea">
     <ul class="carousel">
     <!-- 1 -->
     <li><ul>
       <li><a class="fade" href="http://www.flickr.com/..."><img src="samples/cal1-1.jpg" alt="画像1-1" /></a></li>
       <li><a class="fade" href="http://www.flickr.com/..."><img src="samples/cal1-2.jpg" alt="画像1-2" /></a></li>
       <li><a class="fade" href="http://www.flickr.com/..."><img src="samples/cal1-3.jpg" alt="画像1-3" /></a></li>
     </ul></li>

ここまで実装すると、↓このようになります。ほぼ完成しました。
(見た目は変わりないですが…)

http://okra.ark-web.jp/~takemura/public/js/jquery_cycle/effect2.html
jQuery Cycle Plugin 画面毎にエフェクトを変更するサンプル

[edit]

ページングのデザイン適用

動きについては前回の部分でできました。
最後にページングがデフォルトなのでカッコ悪いので調整します。

あと、<ul id="nav">と書いているのに cycle plugin が自動生成するのが aタグなのもちゃんとliタグを使うように直します。
具体的にはJavaScript部分を修正します。

 $(document).ready(function() {
     $('.carousel').cycle({
         :
         略
         :
        pagerAnchorBuilder: function(index, DOMelement) {
            return '<li id="nav-'+(index+1)+'"><a href="#">'+(index+1)+'を表示</a></li>';
        }
     });

あとは、「1を表示」などと書いてある部分を単純にCSSで背景画像にすればOKです。
アクティブになったときは、ul li.activeSlide となるのでその場合の背景画像を指定しておきます。

 #nav a{ 
 	text-decoration: none;
 	overflow:hidden;
 	display:block;
 	text-indent: -9999px;
 	text-align: left;
 }

 #nav li#nav-1{ 
 	background: url(images/btn-1.gif) no-repeat;
 	display: block;
 }
 #nav li#nav-2{ 
 	background: url(images/btn-2.gif) no-repeat;
 	display: block;
 }
 #nav li#nav-3{ 
 	background: url(images/btn-3.gif) no-repeat;
 	display: block;
 }
 #nav li#nav-4{ 
 	background: url(images/btn-4.gif) no-repeat;
 	display: block;
 }
 #nav li#nav-5{ 
 	background: url(images/btn-5.gif) no-repeat;
 	display: block;
 }
 #nav li#nav-1.activeSlide a { 
 	background: url(images/btn-1_on.gif) no-repeat;
 }
 #nav li#nav-2.activeSlide a { 
 	background: url(images/btn-2_on.gif) no-repeat;
 }
 #nav li#nav-3.activeSlide a { 
 	background: url(images/btn-3_on.gif) no-repeat;
 }
 #nav li#nav-4.activeSlide a { 
 	background: url(images/btn-4_on.gif) no-repeat;
 }
 #nav li#nav-5.activeSlide a { 
 	background: url(images/btn-5_on.gif) no-repeat;
 }

これで完成です。

http://okra.ark-web.jp/~takemura/public/js/jquery_cycle/
完成品

[edit]

まとめ

今回は、あまり意味のない写真リストにあまり意味のないエフェクトとなっていますが、
例えば、1ページ目はロゴだけを表示して、フェードで2ページ目へ、2ページ目から数ページは同じエフェクトで、
最終ページから先頭のロゴに戻る際は、再度フェードで。みたいな演出が可能です。

ここまでできると、ただのスライドショー用プラグインというよりは、メインビジュアルとしてユーザーの注意を引く役目が
十分できるかと思います。

最後に、自動的に動かす時は次の 1セットまで 5秒は維持すること。
自動で動くのを一時的できるようにすること。
については、アクセシビリティ的に守っていただければと思います m(_ _)m

投稿者竹村 | パーマリンク

| append.gif

tag:JavaScript, ライブラリ?, スライドショー?


添付ファイル: fileimg003.jpg 974件 [詳細] fileimg002.jpg 1119件 [詳細] fileimg001.jpg 2665件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-02-17 (木) 21:31:43 (2409d)

アークウェブのサービスやソリューションはこちら