Movable Type 備忘録
jQuery でエントリをアニメーション表示(Featured Content Glider)
- Next Page: ロールアップするナビゲーションバー(tween.js)
- Prev Page: ブラウザのスクロールに連動する RSS アイコン表示
こんばんわ^^
今は早朝 6:30。今年も残り 18 時間を切りました。
今年はこの記事が最後になるかな。
年末恒例の大掃除も昨日で終えたので、今日はノンビリしようと(数日前までは)思ってたんだけど、チビたち(姪っ子、甥っ子)がいるのでそうもいかないかな。
さて、今年最後を締めくくるのは jQuery です (●>∀<●)/
今年になって使い始めた jQuery ですが、prototype に劣らずな JavaScript フレームワークなので、個人的には使いやすくって気に入ってます。
そんな jQuery を使って、投稿したエントリをアニメーション切替えするカスタマイズをやってみたのでご紹介です。
今回使用した JavaScript は Dynamic Drive さんとこで公開されていたものを使用しました。
で、実際に Movable Type とコラボさせてみたのが以下のサンプルページです。
最近のエントリ一覧の代わりにしてもいいし、トップページやカテゴリページで使ってもいいかもですね ( ̄∇ ̄)b
Featured Content Glider の構成
Featured Content Glider の使い方はカンタンで、以下のような構成になってます。
<div id="glide_container">
<div class="glide_content">コンテンツ1内容</div>
<div class="glide_content">コンテンツ2内容</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; /*★重要 お好みの背景色*/
}
以上で、投稿したエントリをアニメーションで表示切替えすることができました ( ̄∇ ̄)/
今年もたくさんの人からコメントやメールを頂きありがとうございます。
来年もよろしくですの (●>∀<●)/
では、良いお年を♪
Trackback Pings(0)
No trackbacks found.
Comments(2)
-
#2: Posted by bzbell
[RES]
>>1 又佐 さん
こんばんわ^^
> いきなりの訪問、いきなりの質問にもほんとに丁寧に教えてくださってありがとうございました。
> 又、また来年も宜しくお願いしますね。いぃえぇ~、ぜんぜん OK ですよぉ

前にも言いましたけど、最初っから何でも分かる人なんていないので、諦めずにがんばってください
わたしでできることならお力になりますので
> ちなみに、私は仕事がら年末年始は勿論仕事です。
友人に看護婦がいまして、その友人も出勤と言ってました。
お体には十分気をつけてください。では、よいお年を。


bzbellさんへ
いきなりの訪問、いきなりの質問にもほんとに丁寧に教えてくださってありがとうございました。
又、また来年も宜しくお願いしますね。
それでは良いお年を。
ちなみに、私は仕事がら年末年始は勿論仕事です。