-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (94 loc) · 4.56 KB
/
index.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!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">
var images = [
{
title:'image two',
imag:'http://farm4.static.flickr.com/3337/4597107633_49dc2253ef_o.jpg',
href:'http://www.malsup.com/jquery/cycle/',
blurb:'Appropriately communicate holistic quality vectors through bricks-and-clicks data. Enthusiastically leverage other\'s world-class collaboration and idea-sharing for diverse processes.'
},
{
title:'image three',
imag:'http://farm4.static.flickr.com/3358/4597108157_a90ee422a0_o.jpg',
href:'http://jquery.com',
blurb:'Conveniently maximize user friendly experiences with future-proof partnerships. Energistically harness market positioning alignments via client-focused relationships.'
},
{
title:'image four',
imag:'http://farm2.static.flickr.com/1421/4597107235_50f51d464a_o.jpg',
href:'http://google.ca',
blurb:'Conveniently maximize user friendly experiences with future-proof partnerships. Energistically harness market positioning alignments via client-focused relationships.'
},
{
title:'image five',
imag:'http://farm5.static.flickr.com/4067/4597722526_6e87fd62bc_o.jpg',
href:'http://elidupuis.com',
blurb:'Conveniently maximize user friendly experiences with future-proof partnerships. Energistically harness market positioning alignments via client-focused relationships.'
}
];
$(document).ready(function(){
$('#trigger').click(function(){
$('#slideshow').qcycle({
slideData: images,
cycleOpts: {
fx: 'fade',
timeout: 3*1000,
pager: '#pagers'
},
createSlide: function (img, index) {
if(window.console) window.console.log("createSlide()", img, index);
var data = img.data('qcycle.slideData');
var slide = $('<div>').addClass('slide').append($(img).attr('alt',data.title));
slide.append(
$('<div class="details">').append($('<p></p>').html( "<strong>" + data.title + "</strong> " + data.blurb )).append(
$('<a class="more-info"></a>').text('Find out more >').attr('href',data.href)
));
return slide;
},
imageKey: 'imag',
defer: false,
onComplete: function(count){
if(window.console) window.console.log('onComplete()', count, 'items loaded');
}
});
$(this).parent().text("Good job! You're smart.");
});
});
// 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="" />
<div class="details">
<p><strong>image one</strong> Conveniently maximize user friendly experiences with future-proof partnerships. Energistically harness market positioning alignments via client-focused relationships.</p>
<a class="more-info" href="http://github.com/elidupuis/qcycle/">Find out more ></a>
</div>
</div>
</div>
<div id="pagers"></div>
<p>The first image is loaded in the HTML source. <a id="trigger" href="#">Click here</a> to start loading the rest of the slides!</p>
<p>Get more info, including the source, at <a href="http://github.com/elidupuis/qcycle/">http://github.com/elidupuis/qcycle/</a>.</p>
</body>
</html>