Story JS Timeline

by NesterOne

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<div id="timeline-embed"></div>
<script type="text/javascript">
    var timeline_config = {
        width: '100%',
        height: '600',
        source: {
            timeline: {
                "headline": "Sh*t People Say",
                    "type": "default",
                    "text": "People say stuff",
                    "startDate": "2012,1,26",
                    "date": [{
                    "startDate": "2011,12,12",
                        "endDate": "2012,1,27",
                        "headline": "Vine",
                        "text": "<p>Vine Test</p>",
                        "asset": {
                        "media": "https://vine.co/v/b55LOA1dgJU",
                            "credit": "",
                            "caption": ""
                    }
                }, {
                    "startDate": "2012,1,26",
                        "endDate": "2012,1,27",
                        "headline": "Sh*t Politicians Say",
                        "text": "<p>In true...</p>",
                        "asset": {
                        "media": "http://youtu.be/u4XpeU9erbg",
                            "credit": "",
                            "caption": ""
                    }
                }]
            }
        },
        embed_id: 'timeline-embed', //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
        start_at_end: false, //OPTIONAL START AT LATEST DATE
        start_at_slide: '4', //OPTIONAL START AT SPECIFIC SLIDE
        start_zoom_adjust: '3', //OPTIONAL TWEAK THE DEFA
        font: 'Bevan-PotanoSans', //OPTIONAL FONT
        debug: true, //OPTIONAL DEBUG TO CONSOLE
    }
</script>
<script type="text/javascript" src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>

CSS

html, body {
     height:100%;
     padding: 0px;
     margin: 0px;
 }