沿革や年表のようなタイムライン的なコンテンツをスライダーで実装する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>