<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example jQuery Timeline</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 4.0.0-alpha.6 -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Font Awesome latest -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery Timeline -->
<link href="./css/timeline.min.css?ver=1.0.5" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<nav class="content-header">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="https://github.com/ka215/jquery.timeline"><i class="fa fa-plug"></i> jQuery Timeline</a></li>
<li class="breadcrumb-item active"><a href="./index.html">Bar type</a></li>
<li class="breadcrumb-item"><a href="./index2.html"><i class="fa fa-check-square-o"></i> Point type</a></li>
<li class="breadcrumb-item"><a href="./index3.html">Multi Languages</a></li>
</ol>
</nav>
<!-- /.content-header -->
<section class="row">
<div class="content-main col-lg-12">
<div id="myTimeline">
<div class="timeline-events">
<!-- point type events -->
<label>Row 2</label>
<div data-timeline-node="{ eventId:1, start:'2017-1-5 5:30',row:2,bdColor:'#942343',image:'./imgs/sample-1.jpg' }">Event Relation 1</div>
<div data-timeline-node="{ eventId:2, start:'2017-2-15 0:00',row:2,margin:12,bdColor:'#942343',relation:{before:1} }">Event Relation 2</div>
<div data-timeline-node="{ eventId:3, start:'2017-4-7 12:30',row:2,margin:12,bdColor:'#942343',relation:{before:2},content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae ligula bibendum, rhoncus felis ac, tincidunt nunc. Maecenas vehicula neque ac tristique egestas.' }">Relational Event (ID:3)</div>
<div data-timeline-node="{ eventId:4, start:'2017-5-27 8:40',row:2,margin:12,bdColor:'#942343',relation:{before:3} }">Event Relation 4</div>
<div data-timeline-node="{ eventId:5, start:'2017-7-14 17:30',row:2,margin:12,bdColor:'#942343',relation:{before:4} }">Event Relation 5</div>
<div data-timeline-node="{ eventId:6, start:'2017-9-26 18:30',row:2,margin:12,bdColor:'#942343',relation:{before:5,after:-1} }">Event Relation 6</div>
<label>Row 3</label>
<div data-timeline-node="{ eventId:7, start:'2016-9-26 7:00',row:3,image:'./imgs/sample-2.jpg',extend:{toggle:'popover',placement:'top',content:'It is also possible to bind external custom events.'} }">Event Relation 7</div>
<div data-timeline-node="{ eventId:8, start:'2016-11-9 8:30',row:3,margin:12,relation:{before:7} }">Event Relation 8</div>
<div data-timeline-node="{ eventId:9, start:'2017-1-25 11:15',row:3,margin:12,relation:{before:8} }">Event Relation 9</div>
<div data-timeline-node="{ eventId:10, start:'2017-4-7 14:10',row:3,margin:12,relation:{before:9,after:5} }">Event Relation 10</div>
<label>Row 4 - 6</label>
<div data-timeline-node="{ eventId:11, start:'2016-10-15 0:00',row:6,bdColor:'#37a34a',image:'./imgs/sample-3.jpg',relation:{after:12,linesize:10} }">Event Relation 11</div>
<div data-timeline-node="{ eventId:12, start:'2017-2-4 17:00',row:6,bdColor:'#37a34a',image:'./imgs/sample-4.jpg' }">Event Relation 12</div>
<div data-timeline-node="{ eventId:13, start:'2016-8-11 22:00',row:5,bdColor:'#6f5436',image:'./imgs/sample-5.jpg',relation:{before:-1,after:11,curve:'rt'} }">Event Relation 13</div>
<div data-timeline-node="{ eventId:14, start:'2016-8-31 2:00',row:4,bdColor:'#dc6b9a',image:'./imgs/sample-6.jpg',relation:{before:-1,after:7,linecolor:'#5a4498',curve:'rb'} }">Event Relation 14</div>
<div data-timeline-node="{ eventId:15, start:'2016-12-24 10:00',row:4,bdColor:'#dc6b9a',image:'./imgs/sample-7.jpg',relation:{before:8,linecolor:'#5a4498',curve:'lb'} }">Event Relation 15</div>
<div data-timeline-node="{ eventId:16, start:'2017-8-11 20:00',row:5,bdColor:'#6f5436',image:'./imgs/sample-8.jpg',relation:{before:12,after:-1,curve:'lt'} }">Event Relation 16</div>
</div>
</div>
</div>
<!-- /.content-main -->
<div class="col-lg-6 col-md-12" hidden>
<div class="card mb-3">
<div class"card-block">
<h5><i class="fa fa-cog"></i> Timeline Configuration</h5>
<div class="card-text">
<!-- configuration content -->
</div>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-lg-12 col-md-12">
<div class="card mb-3">
<div class="card-block timeline-event-view">
<p class="h1">Timeline Event Detail</p>
<p class="lead">Please click on any event on the above timeline.</p>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</section>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
<div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="timeline-event-view"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery (latest 3.2.1) -->
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- tether 1.4.0 (for using bootstrap's tooltip component) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap 4.0.0-alpha.6 -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- jQuery Timeline -->
<script src="./js/timeline.min.js?ver=1.0.5"></script>
<!-- local scripts -->
<script>
$(function () {
$("#myTimeline").timeline({
type: 'point',
scale: 'years',
startDatetime: '2016-1-1',
rows: 6,
rangeAlign: 'center'
});
$("#myTimeline").on("afterRender.timeline", function(){
// usage bootstrap's popover
$('.timeline-node').each(function(){
if ( $(this).data('toggle') === 'popover' ) {
$(this).attr( 'title', $(this).text() );
$(this).popover({
trigger: 'hover'
});
}
});
});
});
</script>
</body>
</html>