-
Notifications
You must be signed in to change notification settings - Fork 0
/
json.html
60 lines (52 loc) · 2.3 KB
/
json.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery qCycle</title>
<style type="text/css" media="screen">
/* None of this CSS is required to use the plugin. It is simply for the demo. */
#slideshow a { color: #fff; text-decoration: none; }
#slideshow a:hover { color: #ccc; }
.slide { position: relative; }
.details { background: rgba(0,0,0,0.7); color: #fff; padding: 1em; position: absolute; bottom: 0; left: 0; }
.details a { font-weight: bold; }
#pagers a { background: #ccc; color: #666; font: 11px/1.2 Helvetica, sans-serif; padding: 2px 4px; margin-right: 3px; text-decoration: none; }
#pagers a.activeSlide { background-color: #666; color: #fff; }
img { vertical-align: bottom; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.qCycle.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#slideshow').qCycle({
toLoad: 'data.json',
cycleOpts: {
fx: 'fade',
timeout: 3*1000,
pager: '#pagers'
},
createSlide: function (img) {
var data = img.data('qCycle.slideData');
var slide = $('<div>').addClass('slide').append($(img).attr('alt',data.title));
slide.append($('<p>').addClass('caption').text(data.title));
return slide;
}
});
});
// if(window.console) window.console.info($.fn.qCycle.ver());
</script>
</head>
<body>
<h1>jQuery.qCycle Demo</h1>
<div id="slideshow">
<div class="slide">
<img src="http://farm2.static.flickr.com/1243/4597723386_5115429a6e_o.jpg" alt="" />
<p class="caption">This is the first photo. In is defined in the HTML source.</p>
</div>
</div>
<div id="pagers"></div>
<p>Get more info, including the source, at <a href="http://github.com/elidupuis/qCycle/">http://github.com/elidupuis/qCycle/</a>.</p>
</body>
</html>