vertical.html

<!doctype html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="author" content="Made with ❤ by Jorge Epuñan - @csslab">
  
  <title>jQuery Timelinr - Dando vida al tiempo</title>
  <link rel="stylesheet" href="css/style_v.css" media="screen" />
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="js/jquery.timelinr-0.9.7.js"></script>
  <script>
    $(function(){
      $().timelinr({
        orientation:  'vertical',
        issuesSpeed:  300,
        datesSpeed:   100,
        arrowKeys:    'true',
        startAt:      3
      })
    });
  </script>

</head>

<body>
  
  <div id="timeline">
    <ul id="dates">
      <li><a href="#1900" class="selected">1900</a></li>
      <li><a href="#1930">1930</a></li>
      <li><a href="#1944">1944</a></li>
      <li><a href="#1950">1950</a></li>
      <li><a href="#1971">1971</a></li>
      <li><a href="#1977">1977</a></li>
      <li><a href="#1989">1989</a></li>
      <li><a href="#1999">1999</a></li>
      <li><a href="#2001">2001</a></li>
      <li><a href="#2011">2011</a></li>
    </ul>
    <ul id="issues">
      <li id="1900" class="selected">
        <img src="images/1.png" width="256" height="256" />
        <h1>1900</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
      <li id="1930">
        <img src="images/2.png" width="256" height="256" />
        <h1>1930</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
      <li id="1944">
        <img src="images/3.png" width="256" height="256" />
        <h1>1944</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
      <li id="1950">
        <img src="images/4.png" width="256" height="256" />
        <h1>1950</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
      <li id="1971">
        <img src="images/5.png" width="256" height="256" />
        <h1>1971</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
      <li id="1977">
        <img src="images/6.png" width="256" height="256" />
        <h1>1977</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
      <li id="1989">
        <img src="images/7.png" width="256" height="256" />
        <h1>1989</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
      <li id="1999">
        <img src="images/8.png" width="256" height="256" />
        <h1>1999</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
      <li id="2001">
        <img src="images/9.png" width="256" height="256" />
        <h1>2001</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
      <li id="2011">
        <img src="images/10.png" width="256" height="256" />
        <h1>2011</h1>
        <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
      </li>
    </ul>
    <div id="grad_top"></div>
    <div id="grad_bottom"></div>
    <a href="#" id="next">+</a>
    <a href="#" id="prev">-</a>
  </div>

  <h1>CSSLab.cl - jQuery Timelinr - Vertical <a href="http://www.csslab.cl/2011/08/18/jquery-timelinr/" title="Volver al artículo original">[Volver/Back]</a></h1>
  <h2>&copy; 2011 CSSLab.cl</h2>

    
</body>
</html>