デモ

ソース

javascript

var timeline = {"timeline":
                 {"headline":"ブログをタイムライン表示してみる",
                  "type":"default",
                      "startDate":"2012,4,1",
                  "text":"TimelineJSを利用して、ブログの内容をタイムライン表示してみ>た。",
                  "date" : []
                     }
                   };
var callback = function(json) {
  $.each(json, function() {
    var date = this.date.replace(/-/g,",");
    var tmp = {
      "startDate": date,
      "headline" : this.title,
      "text"     : this.excerpt,
    }
    timeline.timeline.date.push(tmp);
  });
}
var timeline_config = {
  width : "80%",
  height: "80%",
  source: timeline,
  css   : 'css/timeline.css',
  js    : 'js/timeline-min.js'
}

HTML

<div id="timeline-embed"></div>
<script type="text/javascript" src="js/timeline-embed.js"></script>

  • タイムライン表示
  • TimelineJS
  • jQuery