年表とか沿革とか、そういった時間の流れを
可視化したようなコンテンツをスライダーで
実装できる、というjQueryプラグインのご紹介。
jQuery Timelinrは、コンテンツのスライダー
で、テキストで書かれた西暦が連動して
動きます。
まぁ沿革や年表に使わなきゃいけないわけじゃないんですが、こういうのも面白いかなと思ってタイトルに含めました。あとで自分で検索したいもので。
あ、別件ですが、今更ながらjQueryの記事カテゴリを作りました。RSSでもご購読頂けますので宜しければ。
jQuery Timelinr
こんな感じでパッと見はよくあるコンテンツスライダーなんですが、上にある年号が連動してスライドします。年号はナビとしても利用できます。年号はテキストで書かれていて、コンテンツに応じて色とフォントサイズが変わる、という仕組み。
縦もあるよ
IE6とか7
IETesterでのIE6でも普通に動作しました。透過処理だけで済みそうです。IE7ももちろん動作に問題はありませんでした。
コード
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$().timelinr({
orientation: 'vertical',
issuesSpeed: 300,
datesSpeed: 100,
issuesSpeed: 500
})
});
</script>本体とプラグインを読み込んで縦か横か、とかスピードを設定します。
マークアップ
<div id="timeline"> <ul id="dates"> <li><a href="#" class="selected">1900</a></li> <li><a href="#">1930</a></li> <li><a href="#">1944</a></li> </ul> <ul id="issues"> <li id="#1900" class="selected"> <img src="images/1.png" width="256" height="256" /> <h1>1900</h1> <p>文章がここに入る</p> </li> <li id="#1930"> <img src="images/2.png" width="256" height="256" /> <h1>1930</h1> <p>文章がここに入る</p> </li> <li id="#1944"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>文章がここに入る</p> </li> </ul> <div id="grad_top"></div> <div id="grad_bottom"></div> <a href="#" id="next">+</a> <a href="#" id="prev">-</a> </div>
id=”dates”で年数を指定して、 連動させる要素にその年数のIDを振ります。簡単ですね。
こういったコンテンツは基本的に見る人が限られるので、見やすくしたほうがいいでしょうけど、これはこれで面白いかなと思いました。他にもいろいろ使えそうですしね。以下よりデモとプラグインのダウンロードが可能です。