沿革や年表のようなタイムライン的なコンテンツをスライダーで実装するjQueryプラグイン・ jQuery Timelinr

年表とか沿革とか、そういった時間の流れを
可視化したようなコンテンツをスライダーで
実装できる、という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を振ります。簡単ですね。

こういったコンテンツは基本的に見る人が限られるので、見やすくしたほうがいいでしょうけど、これはこれで面白いかなと思いました。他にもいろいろ使えそうですしね。以下よりデモとプラグインのダウンロードが可能です。

jQuery Timelinr