j1m_carousel 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE.md +21 -0
- data/README.md +41 -0
- data/_data/modules/default/j1_carousel-0.0.1/j1_owl_carousel.yml +501 -0
- data/_data/resources/default/j1_carousel-0.0.1/resource.yml +26 -0
- data/assets/themes/j1/j1/js/adapters/owl_carousel.js +206 -0
- data/assets/themes/j1/owl_carousel/LICENSE +20 -0
- data/assets/themes/j1/owl_carousel/README.md +74 -0
- data/assets/themes/j1/owl_carousel/bower.json +14 -0
- data/assets/themes/j1/owl_carousel/changelog.html +278 -0
- data/assets/themes/j1/owl_carousel/css/owl_carousel.css +86 -0
- data/assets/themes/j1/owl_carousel/css/owl_carousel.min.css +21 -0
- data/assets/themes/j1/owl_carousel/css/owl_transitions.css +178 -0
- data/assets/themes/j1/owl_carousel/css/owl_transitions.min.css +21 -0
- data/assets/themes/j1/owl_carousel/css/themes/j1_template.css +168 -0
- data/assets/themes/j1/owl_carousel/css/themes/sample/j1_sample.less +184 -0
- data/assets/themes/j1/owl_carousel/css/themes/sample/j1_samples.css +523 -0
- data/assets/themes/j1/owl_carousel/demo/assets/fullimage1.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/fullimage2.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/fullimage3.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/fullimage4.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/fullimage5.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/fullimage6.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/fullimage7.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/owl1.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/owl2.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/owl3.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/owl4.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/owl5.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/owl6.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/owl7.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/assets/owl8.jpg +0 -0
- data/assets/themes/j1/owl_carousel/demo/autoHeight.html +335 -0
- data/assets/themes/j1/owl_carousel/demo/click.html +365 -0
- data/assets/themes/j1/owl_carousel/demo/custom.html +417 -0
- data/assets/themes/j1/owl_carousel/demo/customJson.html +358 -0
- data/assets/themes/j1/owl_carousel/demo/full.html +321 -0
- data/assets/themes/j1/owl_carousel/demo/images.html +325 -0
- data/assets/themes/j1/owl_carousel/demo/itemsCustom.html +372 -0
- data/assets/themes/j1/owl_carousel/demo/json.html +336 -0
- data/assets/themes/j1/owl_carousel/demo/json/customData.json +28 -0
- data/assets/themes/j1/owl_carousel/demo/json/data.json +18 -0
- data/assets/themes/j1/owl_carousel/demo/lazyLoad.html +338 -0
- data/assets/themes/j1/owl_carousel/demo/manipulations.html +515 -0
- data/assets/themes/j1/owl_carousel/demo/navOnTop.html +395 -0
- data/assets/themes/j1/owl_carousel/demo/navOnTop2.html +325 -0
- data/assets/themes/j1/owl_carousel/demo/one.html +318 -0
- data/assets/themes/j1/owl_carousel/demo/owlStatus.html +461 -0
- data/assets/themes/j1/owl_carousel/demo/progressBar.html +471 -0
- data/assets/themes/j1/owl_carousel/demo/randomOrder.html +416 -0
- data/assets/themes/j1/owl_carousel/demo/scaleup.html +328 -0
- data/assets/themes/j1/owl_carousel/demo/sync.html +569 -0
- data/assets/themes/j1/owl_carousel/demo/transitions.html +330 -0
- data/assets/themes/j1/owl_carousel/images/ajax-loader.gif +0 -0
- data/assets/themes/j1/owl_carousel/images/apple-touch-icon-114-precomposed.png +0 -0
- data/assets/themes/j1/owl_carousel/images/apple-touch-icon-144-precomposed.png +0 -0
- data/assets/themes/j1/owl_carousel/images/apple-touch-icon-57-precomposed.png +0 -0
- data/assets/themes/j1/owl_carousel/images/apple-touch-icon-72-precomposed.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/controls.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/css3.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/feather.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/grab.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/modern.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/multi.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/responsive.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/tons.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/touch.png +0 -0
- data/assets/themes/j1/owl_carousel/images/demo-slides/zombie.png +0 -0
- data/assets/themes/j1/owl_carousel/images/favicon.png +0 -0
- data/assets/themes/j1/owl_carousel/images/glyphicons-halflings-green.png +0 -0
- data/assets/themes/j1/owl_carousel/images/glyphicons-halflings-white.png +0 -0
- data/assets/themes/j1/owl_carousel/images/glyphicons-halflings.png +0 -0
- data/assets/themes/j1/owl_carousel/images/grabbing.png +0 -0
- data/assets/themes/j1/owl_carousel/images/owl-logo.png +0 -0
- data/assets/themes/j1/owl_carousel/images/owl.video.play.png +0 -0
- data/assets/themes/j1/owl_carousel/index.html +912 -0
- data/assets/themes/j1/owl_carousel/js/owl_carousel.js +1517 -0
- data/assets/themes/j1/owl_carousel/js/owl_carousel.min.js +57 -0
- data/exe/console +14 -0
- data/exe/setup +8 -0
- data/lib/j1m_carousel.rb +5 -0
- data/lib/j1m_carousel/version.rb +3 -0
- metadata +171 -0
|
@@ -0,0 +1,395 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Owl Carousel - Navigation on top</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
|
8
|
+
<meta name="author" content="Bartosz Wojciechowski">
|
|
9
|
+
|
|
10
|
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
|
11
|
+
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
|
12
|
+
<link href="../assets/css/custom.css" rel="stylesheet">
|
|
13
|
+
|
|
14
|
+
<!-- Owl Carousel Assets -->
|
|
15
|
+
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
|
16
|
+
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
|
17
|
+
|
|
18
|
+
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
|
19
|
+
|
|
20
|
+
<!-- Le fav and touch icons -->
|
|
21
|
+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
|
22
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
|
23
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
|
24
|
+
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
|
25
|
+
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
|
|
29
|
+
<div id="top-nav" class="navbar navbar-fixed-top">
|
|
30
|
+
<div class="navbar-inner">
|
|
31
|
+
<div class="container">
|
|
32
|
+
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
|
33
|
+
<span class="icon-bar"></span>
|
|
34
|
+
<span class="icon-bar"></span>
|
|
35
|
+
<span class="icon-bar"></span>
|
|
36
|
+
</button>
|
|
37
|
+
<div class="nav-collapse collapse">
|
|
38
|
+
<ul class="nav pull-right">
|
|
39
|
+
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
|
40
|
+
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
|
41
|
+
</ul>
|
|
42
|
+
<ul class="nav pull-left">
|
|
43
|
+
|
|
44
|
+
</ul>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div id="title">
|
|
51
|
+
<div class="container">
|
|
52
|
+
<div class="row">
|
|
53
|
+
<div class="span12">
|
|
54
|
+
<h1>Navigation on top by custom events</h1>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div id="demo">
|
|
61
|
+
<div class="container">
|
|
62
|
+
<div class="row">
|
|
63
|
+
<div class="span12">
|
|
64
|
+
|
|
65
|
+
<div class="customNavigation">
|
|
66
|
+
<a class="btn prev">Previous</a>
|
|
67
|
+
<a class="btn next">Next</a>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div id="owl-demo" class="owl-carousel">
|
|
71
|
+
|
|
72
|
+
<div class="item"><h1>1</h1></div>
|
|
73
|
+
<div class="item"><h1>2</h1></div>
|
|
74
|
+
<div class="item"><h1>3</h1></div>
|
|
75
|
+
<div class="item"><h1>4</h1></div>
|
|
76
|
+
<div class="item"><h1>5</h1></div>
|
|
77
|
+
<div class="item"><h1>6</h1></div>
|
|
78
|
+
<div class="item"><h1>7</h1></div>
|
|
79
|
+
<div class="item"><h1>8</h1></div>
|
|
80
|
+
<div class="item"><h1>9</h1></div>
|
|
81
|
+
<div class="item"><h1>10</h1></div>
|
|
82
|
+
<div class="item"><h1>11</h1></div>
|
|
83
|
+
<div class="item"><h1>12</h1></div>
|
|
84
|
+
<div class="item"><h1>13</h1></div>
|
|
85
|
+
<div class="item"><h1>14</h1></div>
|
|
86
|
+
<div class="item"><h1>15</h1></div>
|
|
87
|
+
<div class="item"><h1>16</h1></div>
|
|
88
|
+
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<div id="example-info">
|
|
99
|
+
<div class="container">
|
|
100
|
+
<div class="row">
|
|
101
|
+
<div class="span12">
|
|
102
|
+
<h1>Setup</h1>
|
|
103
|
+
<p>This is an example of using custom events for navigation.
|
|
104
|
+
</p>
|
|
105
|
+
<ul class="nav nav-tabs" id="myTab">
|
|
106
|
+
<li class="active"><a href="#javascript">Javascript</a></li>
|
|
107
|
+
<li><a href="#HTML">HTML</a></li>
|
|
108
|
+
<li><a href="#CSS">CSS</a></li>
|
|
109
|
+
</ul>
|
|
110
|
+
|
|
111
|
+
<div class="tab-content">
|
|
112
|
+
|
|
113
|
+
<div class="tab-pane active" id="javascript">
|
|
114
|
+
<pre class="pre-show prettyprint linenums">
|
|
115
|
+
$(document).ready(function() {
|
|
116
|
+
|
|
117
|
+
var owl = $("#owl-demo");
|
|
118
|
+
|
|
119
|
+
owl.owlCarousel();
|
|
120
|
+
|
|
121
|
+
// Custom Navigation Events
|
|
122
|
+
$(".next").click(function(){
|
|
123
|
+
owl.trigger('owl.next');
|
|
124
|
+
})
|
|
125
|
+
$(".prev").click(function(){
|
|
126
|
+
owl.trigger('owl.prev');
|
|
127
|
+
})
|
|
128
|
+
|
|
129
|
+
});
|
|
130
|
+
</pre>
|
|
131
|
+
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div class="tab-pane" id="HTML">
|
|
135
|
+
<pre class="pre-show prettyprint linenums">
|
|
136
|
+
<div class="customNavigation">
|
|
137
|
+
<a class="btn prev">Previous</a>
|
|
138
|
+
<a class="btn next">Next</a>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<div id="owl-demo" class="owl-carousel owl-theme">
|
|
142
|
+
<div class="item"><h1>1</h1></div>
|
|
143
|
+
<div class="item"><h1>2</h1></div>
|
|
144
|
+
<div class="item"><h1>3</h1></div>
|
|
145
|
+
<div class="item"><h1>4</h1></div>
|
|
146
|
+
<div class="item"><h1>5</h1></div>
|
|
147
|
+
<div class="item"><h1>6</h1></div>
|
|
148
|
+
<div class="item"><h1>7</h1></div>
|
|
149
|
+
<div class="item"><h1>8</h1></div>
|
|
150
|
+
<div class="item"><h1>9</h1></div>
|
|
151
|
+
<div class="item"><h1>10</h1></div>
|
|
152
|
+
<div class="item"><h1>11</h1></div>
|
|
153
|
+
<div class="item"><h1>12</h1></div>
|
|
154
|
+
<div class="item"><h1>13</h1></div>
|
|
155
|
+
<div class="item"><h1>14</h1></div>
|
|
156
|
+
<div class="item"><h1>15</h1></div>
|
|
157
|
+
<div class="item"><h1>16</h1></div>
|
|
158
|
+
</div>
|
|
159
|
+
</pre>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<div class="tab-pane" id="CSS">
|
|
163
|
+
<pre class="pre-show prettyprint linenums">
|
|
164
|
+
#owl-demo .item{
|
|
165
|
+
background: #3fbf79;
|
|
166
|
+
padding: 30px 0px;
|
|
167
|
+
margin: 10px;
|
|
168
|
+
color: #FFF;
|
|
169
|
+
-webkit-border-radius: 3px;
|
|
170
|
+
-moz-border-radius: 3px;
|
|
171
|
+
border-radius: 3px;
|
|
172
|
+
text-align: center;
|
|
173
|
+
}
|
|
174
|
+
.customNavigation{
|
|
175
|
+
text-align: center;
|
|
176
|
+
}
|
|
177
|
+
//use styles below to disable ugly selection
|
|
178
|
+
.customNavigation a{
|
|
179
|
+
-webkit-user-select: none;
|
|
180
|
+
-khtml-user-select: none;
|
|
181
|
+
-moz-user-select: none;
|
|
182
|
+
-ms-user-select: none;
|
|
183
|
+
user-select: none;
|
|
184
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
</pre>
|
|
188
|
+
</div>
|
|
189
|
+
</div><!--End Tab Content-->
|
|
190
|
+
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
<div id="more">
|
|
197
|
+
<div class="container">
|
|
198
|
+
|
|
199
|
+
<div class="row">
|
|
200
|
+
<div class="span12">
|
|
201
|
+
<h1>More Demos</h1>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
<div class="row demos-row">
|
|
206
|
+
<div class="span3">
|
|
207
|
+
<a href="images.html" class="demo-box">
|
|
208
|
+
<div class="demo-wrapper demo-images clearfix">
|
|
209
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
210
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
211
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
212
|
+
</div>
|
|
213
|
+
<h3>Images</h3>
|
|
214
|
+
</a>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<div class="span3">
|
|
218
|
+
<a href="custom.html" class="demo-box">
|
|
219
|
+
<div class="demo-wrapper demo-custom clearfix">
|
|
220
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
221
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
222
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
223
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
224
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
225
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
226
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
227
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
228
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
229
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
230
|
+
</div>
|
|
231
|
+
<h3>Custom</h3>
|
|
232
|
+
</a>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<div class="span3">
|
|
236
|
+
<a href="itemsCustom.html" class="demo-box">
|
|
237
|
+
<div class="demo-wrapper demo-full clearfix">
|
|
238
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
239
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
240
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
241
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
242
|
+
</div>
|
|
243
|
+
<h3>Custom 2</h3>
|
|
244
|
+
</a>
|
|
245
|
+
</div>
|
|
246
|
+
|
|
247
|
+
<div class="span3">
|
|
248
|
+
<a href="one.html" class="demo-box">
|
|
249
|
+
<div class="demo-wrapper demo-one clearfix">
|
|
250
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
251
|
+
</div>
|
|
252
|
+
<h3>One Slide</h3>
|
|
253
|
+
</a>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
</div>
|
|
257
|
+
<div class="row demos-row">
|
|
258
|
+
<div class="span3">
|
|
259
|
+
<a href="json.html" class="demo-box">
|
|
260
|
+
<div class="demo-wrapper demo-Json clearfix">
|
|
261
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
262
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
263
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
264
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
265
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
266
|
+
</div>
|
|
267
|
+
<h3>JSON</h3>
|
|
268
|
+
</a>
|
|
269
|
+
</div>
|
|
270
|
+
|
|
271
|
+
<div class="span3">
|
|
272
|
+
<a href="customJson.html" class="demo-box">
|
|
273
|
+
<div class="demo-wrapper demo-Json-custom clearfix">
|
|
274
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
275
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
276
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
277
|
+
</div>
|
|
278
|
+
<h3>JSON Custom</h3>
|
|
279
|
+
</a>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<div class="span3">
|
|
283
|
+
<a href="lazyLoad.html" class="demo-box">
|
|
284
|
+
<div class="demo-wrapper demo-lazy clearfix">
|
|
285
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
286
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
287
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
288
|
+
</div>
|
|
289
|
+
<h3>Lazy Load</h3>
|
|
290
|
+
</a>
|
|
291
|
+
</div>
|
|
292
|
+
|
|
293
|
+
<div class="span3">
|
|
294
|
+
<a href="autoHeight.html" class="demo-box">
|
|
295
|
+
<div class="demo-wrapper demo-height clearfix">
|
|
296
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
297
|
+
</div>
|
|
298
|
+
<h3>Auto Height</h3>
|
|
299
|
+
</a>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
|
|
308
|
+
<div id="footer">
|
|
309
|
+
<div class="container">
|
|
310
|
+
<div class="row">
|
|
311
|
+
<div class="span12">
|
|
312
|
+
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
|
313
|
+
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
|
314
|
+
<a href="../changelog.html">changelog</a> /
|
|
315
|
+
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
|
316
|
+
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
|
317
|
+
<script>
|
|
318
|
+
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
|
319
|
+
if(owldomain !== -1){
|
|
320
|
+
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
|
321
|
+
}
|
|
322
|
+
</script>
|
|
323
|
+
</h5>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
|
331
|
+
<script src="../owl-carousel/owl.carousel.js"></script>
|
|
332
|
+
|
|
333
|
+
|
|
334
|
+
<!-- Demo -->
|
|
335
|
+
|
|
336
|
+
<style>
|
|
337
|
+
#owl-demo .item{
|
|
338
|
+
background: #3fbf79;
|
|
339
|
+
padding: 30px 0px;
|
|
340
|
+
margin: 10px;
|
|
341
|
+
color: #FFF;
|
|
342
|
+
-webkit-border-radius: 3px;
|
|
343
|
+
-moz-border-radius: 3px;
|
|
344
|
+
border-radius: 3px;
|
|
345
|
+
text-align: center;
|
|
346
|
+
}
|
|
347
|
+
.customNavigation{
|
|
348
|
+
text-align: center;
|
|
349
|
+
}
|
|
350
|
+
.customNavigation a{
|
|
351
|
+
-webkit-user-select: none;
|
|
352
|
+
-khtml-user-select: none;
|
|
353
|
+
-moz-user-select: none;
|
|
354
|
+
-ms-user-select: none;
|
|
355
|
+
user-select: none;
|
|
356
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
357
|
+
}
|
|
358
|
+
</style>
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
<script>
|
|
362
|
+
$(document).ready(function() {
|
|
363
|
+
|
|
364
|
+
var owl = $("#owl-demo");
|
|
365
|
+
|
|
366
|
+
owl.owlCarousel();
|
|
367
|
+
|
|
368
|
+
// Custom Navigation Events
|
|
369
|
+
$(".next").click(function(){
|
|
370
|
+
owl.trigger('owl.next');
|
|
371
|
+
})
|
|
372
|
+
$(".prev").click(function(){
|
|
373
|
+
owl.trigger('owl.prev');
|
|
374
|
+
})
|
|
375
|
+
$(".play").click(function(){
|
|
376
|
+
owl.trigger('owl.play',1000);
|
|
377
|
+
})
|
|
378
|
+
$(".stop").click(function(){
|
|
379
|
+
owl.trigger('owl.stop');
|
|
380
|
+
})
|
|
381
|
+
|
|
382
|
+
|
|
383
|
+
});
|
|
384
|
+
</script>
|
|
385
|
+
|
|
386
|
+
|
|
387
|
+
<script src="../assets/js/bootstrap-collapse.js"></script>
|
|
388
|
+
<script src="../assets/js/bootstrap-transition.js"></script>
|
|
389
|
+
<script src="../assets/js/bootstrap-tab.js"></script>
|
|
390
|
+
|
|
391
|
+
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
|
392
|
+
<script src="../assets/js/application.js"></script>
|
|
393
|
+
|
|
394
|
+
</body>
|
|
395
|
+
</html>
|
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Owl Carousel - Images Demo</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
|
|
8
|
+
<meta name="author" content="Bartosz Wojciechowski">
|
|
9
|
+
|
|
10
|
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
|
|
11
|
+
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
|
|
12
|
+
<link href="../assets/css/custom.css" rel="stylesheet">
|
|
13
|
+
|
|
14
|
+
<!-- Owl Carousel Assets -->
|
|
15
|
+
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
|
|
16
|
+
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
|
|
17
|
+
|
|
18
|
+
<!-- Prettify -->
|
|
19
|
+
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
<!-- Le fav and touch icons -->
|
|
23
|
+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
|
24
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
|
25
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
|
26
|
+
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
|
27
|
+
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
|
|
31
|
+
<div id="top-nav" class="navbar navbar-fixed-top">
|
|
32
|
+
<div class="navbar-inner">
|
|
33
|
+
<div class="container">
|
|
34
|
+
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
|
35
|
+
<span class="icon-bar"></span>
|
|
36
|
+
<span class="icon-bar"></span>
|
|
37
|
+
<span class="icon-bar"></span>
|
|
38
|
+
</button>
|
|
39
|
+
<div class="nav-collapse collapse">
|
|
40
|
+
<ul class="nav pull-right">
|
|
41
|
+
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
|
|
42
|
+
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
|
|
43
|
+
</ul>
|
|
44
|
+
<ul class="nav pull-left">
|
|
45
|
+
|
|
46
|
+
</ul>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div id="title">
|
|
53
|
+
<div class="container">
|
|
54
|
+
<div class="row">
|
|
55
|
+
<div class="span12">
|
|
56
|
+
<h1>Navigation on top by callback</h1>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div id="demo">
|
|
63
|
+
<div class="container">
|
|
64
|
+
<div class="row">
|
|
65
|
+
<div class="span12">
|
|
66
|
+
|
|
67
|
+
<div id="owl-demo" class="owl-carousel">
|
|
68
|
+
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
|
69
|
+
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
|
70
|
+
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
|
71
|
+
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
|
|
72
|
+
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
|
|
73
|
+
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
|
|
74
|
+
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
|
|
75
|
+
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div id="example-info">
|
|
85
|
+
<div class="container">
|
|
86
|
+
<div class="row">
|
|
87
|
+
<div class="span12">
|
|
88
|
+
<h1>Setup</h1>
|
|
89
|
+
<p>Navigation moved on top by <code>afterInit</code> callback</p>
|
|
90
|
+
<ul class="nav nav-tabs" id="myTab">
|
|
91
|
+
<li class="active"><a href="#javascript">Javascript</a></li>
|
|
92
|
+
<li><a href="#HTML">HTML</a></li>
|
|
93
|
+
<li><a href="#CSS">CSS</a></li>
|
|
94
|
+
</ul>
|
|
95
|
+
|
|
96
|
+
<div class="tab-content">
|
|
97
|
+
|
|
98
|
+
<div class="tab-pane active" id="javascript">
|
|
99
|
+
<pre class="pre-show prettyprint linenums">
|
|
100
|
+
$(document).ready(function() {
|
|
101
|
+
|
|
102
|
+
$("#owl-demo").owlCarousel({
|
|
103
|
+
navigation:true,
|
|
104
|
+
afterInit : function(elem){
|
|
105
|
+
var that = this
|
|
106
|
+
that.owlControls.prependTo(elem)
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
});
|
|
111
|
+
</pre>
|
|
112
|
+
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<div class="tab-pane" id="HTML">
|
|
116
|
+
<pre class="pre-show prettyprint linenums">
|
|
117
|
+
<div id="owl-demo">
|
|
118
|
+
|
|
119
|
+
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
|
|
120
|
+
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
|
|
121
|
+
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
|
|
122
|
+
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
|
|
123
|
+
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
|
|
124
|
+
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
|
|
125
|
+
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
|
|
126
|
+
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
|
|
127
|
+
|
|
128
|
+
</div>
|
|
129
|
+
</pre>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<div class="tab-pane" id="CSS">
|
|
133
|
+
<pre class="pre-show prettyprint linenums">
|
|
134
|
+
#owl-demo .item{
|
|
135
|
+
margin: 3px;
|
|
136
|
+
}
|
|
137
|
+
#owl-demo .item img{
|
|
138
|
+
display: block;
|
|
139
|
+
width: 100%;
|
|
140
|
+
height: auto;
|
|
141
|
+
}
|
|
142
|
+
</pre>
|
|
143
|
+
</div>
|
|
144
|
+
</div><!--End Tab Content-->
|
|
145
|
+
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<div id="more">
|
|
152
|
+
<div class="container">
|
|
153
|
+
|
|
154
|
+
<div class="row">
|
|
155
|
+
<div class="span12">
|
|
156
|
+
<h1>More Demos</h1>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div class="row demos-row">
|
|
161
|
+
<div class="span3">
|
|
162
|
+
<a href="images.html" class="demo-box">
|
|
163
|
+
<div class="demo-wrapper demo-images clearfix">
|
|
164
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
165
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
166
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
167
|
+
</div>
|
|
168
|
+
<h3>Images</h3>
|
|
169
|
+
</a>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<div class="span3">
|
|
173
|
+
<a href="custom.html" class="demo-box">
|
|
174
|
+
<div class="demo-wrapper demo-custom clearfix">
|
|
175
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
176
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
177
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
178
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
179
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
180
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
181
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
182
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
183
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
184
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
185
|
+
</div>
|
|
186
|
+
<h3>Custom</h3>
|
|
187
|
+
</a>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<div class="span3">
|
|
191
|
+
<a href="itemsCustom.html" class="demo-box">
|
|
192
|
+
<div class="demo-wrapper demo-full clearfix">
|
|
193
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
194
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
195
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
196
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
197
|
+
</div>
|
|
198
|
+
<h3>Custom 2</h3>
|
|
199
|
+
</a>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<div class="span3">
|
|
203
|
+
<a href="one.html" class="demo-box">
|
|
204
|
+
<div class="demo-wrapper demo-one clearfix">
|
|
205
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
206
|
+
</div>
|
|
207
|
+
<h3>One Slide</h3>
|
|
208
|
+
</a>
|
|
209
|
+
</div>
|
|
210
|
+
|
|
211
|
+
</div>
|
|
212
|
+
<div class="row demos-row">
|
|
213
|
+
<div class="span3">
|
|
214
|
+
<a href="json.html" class="demo-box">
|
|
215
|
+
<div class="demo-wrapper demo-Json clearfix">
|
|
216
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
217
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
218
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
219
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
220
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
221
|
+
</div>
|
|
222
|
+
<h3>JSON</h3>
|
|
223
|
+
</a>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<div class="span3">
|
|
227
|
+
<a href="customJson.html" class="demo-box">
|
|
228
|
+
<div class="demo-wrapper demo-Json-custom clearfix">
|
|
229
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
230
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
231
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
232
|
+
</div>
|
|
233
|
+
<h3>JSON Custom</h3>
|
|
234
|
+
</a>
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
<div class="span3">
|
|
238
|
+
<a href="lazyLoad.html" class="demo-box">
|
|
239
|
+
<div class="demo-wrapper demo-lazy clearfix">
|
|
240
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
241
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
242
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
243
|
+
</div>
|
|
244
|
+
<h3>Lazy Load</h3>
|
|
245
|
+
</a>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
<div class="span3">
|
|
249
|
+
<a href="autoHeight.html" class="demo-box">
|
|
250
|
+
<div class="demo-wrapper demo-height clearfix">
|
|
251
|
+
<div class="demo-slide"><div class="bg"></div></div>
|
|
252
|
+
</div>
|
|
253
|
+
<h3>Auto Height</h3>
|
|
254
|
+
</a>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
|
|
263
|
+
<div id="footer">
|
|
264
|
+
<div class="container">
|
|
265
|
+
<div class="row">
|
|
266
|
+
<div class="span12">
|
|
267
|
+
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
|
|
268
|
+
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
|
|
269
|
+
<a href="../changelog.html">changelog</a> /
|
|
270
|
+
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
|
|
271
|
+
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
|
|
272
|
+
<script>
|
|
273
|
+
var owldomain = window.location.hostname.indexOf("owlgraphic");
|
|
274
|
+
if(owldomain !== -1){
|
|
275
|
+
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
|
276
|
+
}
|
|
277
|
+
</script>
|
|
278
|
+
</h5>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
|
286
|
+
<script src="../owl-carousel/owl.carousel.js"></script>
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
<!-- Demo -->
|
|
290
|
+
|
|
291
|
+
<style>
|
|
292
|
+
#owl-demo .item{
|
|
293
|
+
margin: 3px;
|
|
294
|
+
}
|
|
295
|
+
#owl-demo .item img{
|
|
296
|
+
display: block;
|
|
297
|
+
width: 100%;
|
|
298
|
+
height: auto;
|
|
299
|
+
}
|
|
300
|
+
</style>
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
<script>
|
|
304
|
+
$(document).ready(function() {
|
|
305
|
+
$("#owl-demo").owlCarousel({
|
|
306
|
+
navigation:true,
|
|
307
|
+
afterInit : function(elem){
|
|
308
|
+
var that = this
|
|
309
|
+
that.owlControls.prependTo(elem)
|
|
310
|
+
}
|
|
311
|
+
});
|
|
312
|
+
|
|
313
|
+
});
|
|
314
|
+
</script>
|
|
315
|
+
|
|
316
|
+
|
|
317
|
+
<script src="../assets/js/bootstrap-collapse.js"></script>
|
|
318
|
+
<script src="../assets/js/bootstrap-transition.js"></script>
|
|
319
|
+
<script src="../assets/js/bootstrap-tab.js"></script>
|
|
320
|
+
|
|
321
|
+
<script src="../assets/js/google-code-prettify/prettify.js"></script>
|
|
322
|
+
<script src="../assets/js/application.js"></script>
|
|
323
|
+
|
|
324
|
+
</body>
|
|
325
|
+
</html>
|