时间线JS:如何设置时间轴开始日期?

时间:2012-09-28 00:43:33

标签: javascript jquery json jquery-plugins

我一直在使用来自here的TimelineJS和JSON版本的数据转发。它工作正常,但我无法调整时间线开始的日期。

在文档中,它说如下设置JSON文件:

    {
        "timeline":
        {
            "headline":"The Main Timeline Headline Goes here",
            "type":"default",
            "startDate":"1888",
            "text":"<p>Intro body text goes here, some HTML is ok</p>",

我已经复制了这个但只是改变了细节,例如:

{
    "timeline":
    {
        "headline":"HOT LATIN EVENTS",
        "type":"default",
        "startDate":"2012,09,30",
        "text":"Scroll through a list of Latin Music events>>> ",
        "date": [

             {
                "startDate":"2012,08,24",
                "headline":"PELIGRO Y SU BANDA  - Melbourne",
                "text":"<p><strong>Copacaban International</strong>, 139 Smith Street, Fitzroy, 3065</p>",
                "asset":
                {
                    "media":"http://www.clavecontraclave.com/Peligro%20-%20Melbourne%20klein.jpg",
                    "credit":"",
                    "caption":""
                }
            },

我试过在startDate中使用一年(例如:2011)也没有效果。时间线刚好从下面的第一个事件开始。

任何人都知道发生了什么事?

由于

1 个答案:

答案 0 :(得分:2)

我还没有找到直接指定时间轴开始日期的方法,但您可以遍历时间轴幻灯片以找到最接近的匹配项,然后使用该幻灯片的索引作为start_at_slide值。例如:

var timeline_dates = data_source.timeline.date;
var start_index = 0;
var target_date = new Date(); //set whatever date you want as your start date
for(x in timeline_dates) {
    var slide_date = new Date( timeline_dates[x].startDate );
    if( slide_date < target_date) start_index++;
}

然后,当您实例化时间轴时,您会像这样使用它:

createStoryJS({
    type:       'timeline',
    width:      '800',
    height:     '400',
    source:     data_source,
    embed_id:   'timeline_container',
    start_at_slide: start_index
});