Movable Type 備忘録

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

Dec312007
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, jQuery

Next Page: ロールアップするナビゲーションバー（tween.js）
Prev Page: ブラウザのスクロールに連動する RSS アイコン表示

こんばんわ^^

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

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

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

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

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

Featured Content Glider

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

Featured Content Glider サンプル

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

Featured Content Glider の構成

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

<div id="glide_container">
    <div class="glide_content">コンテンツ１内容</div>
<div class="glide_content">コンテンツ２内容</div>
</div>
<div id="glide_toggle">
<a href="javascript:void(0);" class="prev">Prev</a>
<a href="javascript:void(0);" class="toc">Contents 1</a>
<a href="javascript:void(0);" class="toc">Contents 2</a>
<a href="javascript:void(0);" class="next">Next</a>
</div>

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

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

Featured Content Glider の説明

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

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

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

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

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

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

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

スタイルシート

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

#glide_container {
height: 240px;     /*★重要 お好みの高さ*/
position: relative;/*★重要 削除不可*/
overflow: hidden;  /*★重要 削除不可*/
}
.glide_content {
width: 100%;       /*★重要 お好みの横幅*/
position: absolute;/*★重要 削除不可*/
visibility: hidden;/*★重要 削除不可*/
background: #fff;  /*★重要 お好みの背景色*/
}

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

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

では、良いお年を♪