This repository has been archived by the owner on Dec 1, 2017. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (100 loc) · 2.84 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jquery.slideview demo</title>
<script src="jquery.min.js"></script>
<script src="jquery.transition.js"></script>
<script src="jquery.slideview.js"></script>
<link rel="stylesheet" type="text/css" href="slideview.css" media="all" />
<!-- demo assets -->
<link href='http://fonts.googleapis.com/css?family=Amaranth:400,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="assets/demo.css" media="all" />
<script> jQuery.slideview.DEBUG = true; </script>
</head>
<body>
<h1><span>jquery.slideview demo</span></h1>
<!--
Carousel templating
=====================
There is some flexibility to the kind of markup you can use
in your carousel template as long as the follows this basic
structure:
- A wrapper element with the class 'slideview'
- A slide(s) container element with the class 'slideview-track'
- A slide element with the class 'slideview-slide'
Turn any slide child element into a template field by setting a data attribute:
<p data-slideview-field="foo"></p>
Carousel json
=====================
json arrays should be supplied in the following format:
[
{
"<field-name>": {
"value": "<field-value>"
}
}
]
Given the following example:
[{
foo: {
"value" : "title 1"
}
}]
By default the will attempt to innerHTML the value "title 1" to the template field "foo".
Given the following example we set an additional 'attr' property on the field data object
so the value is set on the element attribute and not via element.innerHTML:
[{
foo: {
"value" : "images/sunset.jpg",
"attr" : "src"
}
}]
Will set the template field src attribute to "images/sunset.jpg"
-->
<div id="my-slideview" class="slideview large-carousel">
<ul class="slideview-track">
<li class="slideview-slide">
<img data-slideview-field="image" class="image" src="assets/images/skyscrapers.jpg" alt="" />
<div class="slideview-inner">
<h2 data-slideview-field="title" class="title">Title 1</h2>
</div>
</li>
</ul>
</div>
<script>
(function ($) {
var json = [
{
"title": { "value" : "Skyscrapers" },
"image": {
"value" : "assets/images/skyscrapers.jpg",
"attr" : "src"
}
}, {
"title": { "value" : "Coney island" },
"image": {
"value" : "assets/images/wonderwheel.jpg",
"attr" : "src"
}
}, {
"title": { "value" : "Burnham-on-sea" },
"image": {
"value" : "assets/images/burnham-on-sea.jpg",
"attr" : "src"
}
}
];
var carousel = new $.slideview({
data: json,
container: '#my-slideview',
loop: true
});
carousel.load();
// Timed slide change only works if option.loop is set to true
carousel.startTimed( 7000 );
})(jQuery);
</script>
<p class="github"><a href="http://github.com/peteboere/jquery-slideview">View project on GitHub</a></p>
</body>
</html>