<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="/reusablecomponentsbyjoel/SiteAssets/Timeline/css/style123.css" />
<script type="text/javascript"
src="/reusablecomponentsbyjoel/SiteAssets/Timeline/js/modernizr.custom.63
321.js" defer="defer"></script>
<script type="text/javascript">
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl +
"/_api/web/lists/getbytitle('Events')/items?$orderby=EventDate%20asc",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(events) {
var html="";
$.each(events.d.results, function() {
html+= "<li class='event'><input type='radio'
name='tl-group'/><label></label><div style='backgroundimage:url("+this.ImageURL.Url+")'
class='thumb'><span>"+this.Location+"</span></div><div class='contentperspective'><div
class='content'><div class='contentinner'><h3>"+this.Title+"</h3><p>"+this.Description+"</p></div></div></di
v></li>";
});
$('.timeline').append(html);
},
error: function(events) {
}
});
</script>
</head>
<body>
<div class="container" style="background-color:#c2edf4">
<header class="clearfix">
<h2>Event Timeline <span>List of events this year</span></h2>
<div class="support-note">
<span class="note-ie">Sorry, only modern browsers.</span>
</div>
</header>
<section class="main">
<ul class="timeline">
</ul>
</section>
</div>
<!-- /container -->
</body>
</html>