Movable Type 備忘録

 jQuery でエントリをアニメーション表示(Featured Content Glider)

  • Dec312007
  • Vote:
    http://bizcaz.com/archives/2007/12/31-064427.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんばんわ^^

今は早朝 6:30。今年も残り 18 時間を切りました。
今年はこの記事が最後になるかな。

年末恒例の大掃除も昨日で終えたので、今日はノンビリしようと(数日前までは)思ってたんだけど、チビたち(姪っ子、甥っ子)がいるのでそうもいかないかな。

さて、今年最後を締めくくるのは jQuery です (●＞∀＜●)／

今年になって使い始めた jQuery ですが、prototype に劣らずな JavaScript フレームワークなので、個人的には使いやすくって気に入ってます。
そんな jQuery を使って、投稿したエントリをアニメーション切替えするカスタマイズをやってみたのでご紹介です。

今回使用した JavaScript は Dynamic Drive さんとこで公開されていたものを使用しました。

で、実際に Movable Type とコラボさせてみたのが以下のサンプルページです。

最近のエントリ一覧の代わりにしてもいいし、トップページやカテゴリページで使ってもいいかもですね (￣∇￣)b

Featured Content Glider の構成

Featured Content Glider の使い方はカンタンで、以下のような構成になってます。

  1. <div id="glide_container">
  2. <div class="glide_content">コンテンツ１内容</div>
  3.     <div class="glide_content">コンテンツ２内容</div>
  4. </div>
  5.  
  6. <div id="glide_toggle">
  7.     <a href="javascript:void(0);" class="prev">Prev</a>
  8.     <a href="javascript:void(0);" class="toc">Contents 1</a>
  9.     <a href="javascript:void(0);" class="toc">Contents 2</a>
  10.     <a href="javascript:void(0);" class="next">Next</a>
  11. </div>

赤い字の部分がアニメーションさせたい各コンテンツ( <div class="glide_content"> )になります。
その各コンテンツを青い字の部分( <div id="glide_container"> )で括ります。

そして、緑の字の部分がコンテンツ切り替えのトグルボタンになります。

Featured Content Glider の説明

Featured Content Glider の各パラメータは以下の通りです。

  1. featuredcontentglider.init({
  2.     gliderid: "glide_container", // glider コンテナの ID
  3.     contentclass: "glide_content", // スライドさせるコンテンツのクラス
  4.     togglerid: "glide_toggle", // ナビゲーションバーの ID
  5.     selected: 0, // 初期表示させたいコンテンツ番号(デフォルト: 0)
  6.     persiststate: false, // 最後に表示したコンテンツ番号をキャッシュ(デフォルト: false)
  7.                                    // true:キャッシュあり false:キャッシュなし
  8.     speed: 500, // アニメーション速度(ミリ秒)
  9.     autorotate: false, // ローテーション設定(デフォルト: false)
  10.                                    // true:自動 false:なし
  11.     autorotateconfig: [3000, 2] // 自動ローテーションの場合のローテーション間隔(ミリ秒)
  12. });

  • gliderid
    コンテナの ID 名称を指定します。必須です。

  • contentclass
    コンテンツのクラス名称を指定します。必須です。

  • togglerid
    コンテンツ切り替えのトグルボタンの ID 名称を指定します。必須です。

  • selected
    最初に表示するコンテンツの番号を指定します。コンテンツ番号は 0 から始まります。
    デフォルトは 0 です。

  • persiststate
    表示したコンテンツ番号を保持(キャッシュ)するか否かを設定します。

    • true: キャッシュする
    • false: キャッシュしない(デフォルト)

  • speed
    アニメーション速度を指定します。ミリ秒単位で指定します。必須です。

  • autorotate
    自動的にコンテンツを切り替えるか否かを設定します。

    • true: 自動切換え(ローテーション)あり
    • false: 自動切換えなし(デフォルト)

  • autorotateconfig
    自動切換えありの場合の、ローテーション間隔をミリ秒で指定します。

Featured Content Glider の使い方

ここでは、上記サンプルをベースに説明していきます。
あらかじめ配布元から以下の 3 つのファイルを入手して、サーバにアップロードしておいてください。アップロード先はどこでも構いません。各自の環境に合わせてアップロードしてください。

  • jquery-1.2.1.pack.js
  • featuredcontentglider.js
  • featuredcontentglider.css

以下にサンプルで使用してるコードを記します。

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. featuredcontentglider.init({
  4.     gliderid: "glide_container", // glider コンテナの ID
  5.     contentclass: "glide_content", // スライドさせるコンテンツのクラス
  6.     togglerid: "glide_toggle", // ナビゲーションバーの ID
  7.     selected: 1, // 初期表示させたいコンテンツ番号(デフォルト: 0)
  8.     persiststate: false, // 最後に表示したコンテンツ番号をキャッシュ(デフォルト: false)
  9.                                    // true:キャッシュあり false:キャッシュなし
  10.     speed: 500, // アニメーション速度(ミリ秒)
  11.     autorotate: false, // ローテーション設定(デフォルト: false)
  12.                                    // true:自動 false:なし
  13.     autorotateconfig: [3000, 2] // 自動ローテーションの場合のローテーション間隔(ミリ秒)
  14. });
  15. //]]>
  16. </script>
  17.  
  18. <div id="glide_container">
  19. <MTEntries lastn="3">
  20.     <div class="glide_content">
  21.         <p style="font-size:120%; font-weight:700;"><$MTEntryTitle$></p>
  22.         <p><$MTEntryBody$></p>
  23.     </div>
  24.     </MTEntries>
  25. </div>
  26.  
  27. <div id="glide_toggle">
  28.     <a href="javascript:void(0);" class="prev">Prev</a>
  29. <MTEntries lastn="3"><a href="javascript:void(0);" class="toc"><$MTVar name="__counter__"$></a></MTEntries>
  30.     <a href="javascript:void(0);" class="next">Next</a>
  31. </div>

青い字の部分にはコンテナ ID(glide_container)名称を指定しています。
赤い字の部分にはコンテンツ(エントリ)のクラス名称(glide_content)を指定します。
そして、緑の字の部分には、コンテンツ切り替えのトグルボタンの ID 名称(glide_toggle)を指定しています。

ピンクの字の部分で最新のエントリ 3 件分の本文( MTEntryBody )を表示しています。
カーキの字の部分でエントリ数分のトグルボタンを表示します。

スタイルシート

基本的には配布元さんのスタイルシートをカスタマイズすれば使えます。
以下にポイントを記します。

  1. #glide_container {
  2.     height: 240px; /*★重要 お好みの高さ*/
  3.     position: relative;/*★重要 削除不可*/
  4.     overflow: hidden; /*★重要 削除不可*/
  5. }
  6. .glide_content {
  7.     width: 100%; /*★重要 お好みの横幅*/
  8.     position: absolute;/*★重要 削除不可*/
  9.     visibility: hidden;/*★重要 削除不可*/
  10.     background: #fff; /*★重要 お好みの背景色*/
  11. }

以上で、投稿したエントリをアニメーションで表示切替えすることができました (￣∇￣)/

今年もたくさんの人からコメントやメールを頂きありがとうございます。
来年もよろしくですの (●＞∀＜●)／

では、良いお年を♪

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by 又佐 @ December 31, 2007 [REPLY]
user-pic

bzbellさんへ
いきなりの訪問、いきなりの質問にもほんとに丁寧に教えてくださってありがとうございました。
又、また来年も宜しくお願いしますね。

それでは良いお年を。

ちなみに、私は仕事がら年末年始は勿論仕事です。

 
#2: Posted by Author Profile Page bzbell @ December 31, 2007 [REPLY]
user-pic

>>1 又佐 さん

こんばんわ^^

> いきなりの訪問、いきなりの質問にもほんとに丁寧に教えてくださってありがとうございました。
> 又、また来年も宜しくお願いしますね。

いぃえぇ～、ぜんぜん OK ですよぉチュ！
前にも言いましたけど、最初っから何でも分かる人なんていないので、諦めずにがんばってくださいキャハハわたしでできることならお力になりますのであせあせ

> ちなみに、私は仕事がら年末年始は勿論仕事です。

友人に看護婦がいまして、その友人も出勤と言ってました。
お体には十分気をつけてください。

では、よいお年を。

 

 Post a Comment

 

コメント用フィード