forked from ekallevig/jShowOff
/
index.html
278 lines (239 loc) · 15.7 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!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" lang="en" xml:lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig</title>
<meta name="robots" content="INDEX, FOLLOW"/>
<meta name="author" content="Erik Kallevig"/>
<meta name="keywords" content="jShowOff, jQuery, content rotator, feature rotator, free, plugin, fade, slide, slider, play, pause, captions, erik, kallevig, erik kallevig" />
<meta name="description" content="jShowOff is a jQuery plugin for creating a rotating content module, often used to promote pages, sections, or features on a site." />
<link rel="stylesheet" href="./jshowoff.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.jshowoff.min.js"></script>
</head>
<body id="home">
<!--
<p>Title: jShowOff: a jQuery Content Rotator Plugin</p>
<p>Author: Erik Kallevig</p>
<p>Version: 0.1.2</p>
<p>Website: http://ekallevig.com/jshowoff</p>
<p>Licene: Dual licensed under the MIT and GPL licenses.</p>
-->
<div id="wrap">
<div id="about">
<h1>jShowOff: a jQuery Content Rotator</h1>
<p>jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <code><li></code>) inside a specified wrapper element (eg. <code><ul></code>) on which <code>.jshowoff()</code> is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.</p>
<h2>Required Files</h2>
<ol>
<li><a href="http://jquery.com">the jQuery Core JavaScript Library (1.3+)</a></li>
<li><a href="http://github.com/ekallevig/jShowOff/raw/master/jquery.jshowoff.min.js">jquery.jshowoff.min.js</a></li>
</ol>
<p>To get jShowOff up and running, simply include the above files on your page, create the required slides markup and invoke the method (example below). You can use the default skin (<a href="http://github.com/ekallevig/jShowOff/raw/master/jshowoff.css">jshowoff.css</a>) from the demo, or restyle the elements to your liking. <span class="note">NOTE: Source files are maintained at <a href="http://github.com/ekallevig/jShowOff">github.com/ekallevig/jShowOff</a>.</span></p>
<h2>How to Use</h2>
<p>The required markup for jShowOff is a parent element with one or more child elements, which are used as the 'slides'. The following is a basic example:</p>
<pre><code><div id="features">
<div><p>This is a slide!</p></div>
<div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#features').jshowoff(); });
</script></code></pre>
<h2>Options</h2>
<p>jShowOff has several options for customization. Pass these settings as an object to the <code>.jshowoff()</code> method like this:</p>
<pre><code>$('#features').jshowoff({ speed:1500, links: false }); });</code></pre>
<table id="options" cellpadding="0" cellspacing="0">
<col />
<col />
<col width="120" />
<col />
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>animatePause</td>
<td>boolean</td>
<td>true</td>
<td>Whether to use 'Pause' animation text when pausing.</td>
</tr>
<tr>
<td>autoPlay</td>
<td>boolean</td>
<td>true</td>
<td>Whether to start playing immediately.</td>
</tr>
<tr>
<td>changeSpeed</td>
<td>integer</td>
<td>600</td>
<td>Speed of transition in milliseconds.</td>
</tr>
<tr>
<td>controls</td>
<td>boolean</td>
<td>true</td>
<td>Whether to create & display controls (Play/Pause, Previous, Next).</td>
</tr>
<tr>
<td>controlText</td>
<td>object</td>
<td>{ play:'Play', pause:'Pause', previous:'Previous', next:'Next' }</td>
<td>Text to use for controls (Play/Pause, Previous, Next). For multi-language support, etc.</td>
</tr>
<tr>
<td>cssClass</td>
<td>string</td>
<td>true</td>
<td>Add an additional custom class to the .jshowoff wrapper.</td>
</tr>
<tr>
<td>effect</td>
<td>string</td>
<td>'fade'</td>
<td>Type of transition effect: 'fade', 'slideLeft' or 'none'.</td>
</tr>
<tr>
<td>hoverPause</td>
<td>boolean</td>
<td>true</td>
<td>Whether to pause on hover.</td>
</tr>
<tr>
<td>links</td>
<td>boolean</td>
<td>true</td>
<td>Whether to create & display numeric links to each slide.</td>
</tr>
<tr>
<td>speed</td>
<td>integer</td>
<td>3000</td>
<td>Time each slide is shown in milliseconds.</td>
</tr>
</table>
<p>Additionally, the value of the <code>title</code> attribute on the 'slide' elements will be inserted as the text for the corresponding 'slide link' in lieu of the default numeric value.</p>
<h2>Support</h2>
<p>If you need help or if you've found a bug, please <a href="http://github.com/ekallevig/jShowOff/issues">create an issue on github</a> and I will investigate.</p>
<h2>Download</h2>
<p>Source files are maintained at <a href="http://github.com/ekallevig/jShowOff">github.com/ekallevig/jShowOff</a>. To quickly grab the bundled files, click the 'Download' button on the right.</p>
<h2>Future Features</h2>
<ul>
<li>Option to show slides randomly.</li>
</ul>
<h2>Change Log</h2>
<p>0.1.2</p>
<ul>
<li>Added <code>effect</code> option to customize transitions. Options currently include: <code>fade</code>, <code>slideLeft</code> or <code>none</code>. Slide effect uses new global jQuery mini-plugin, <code>$.slideIt()</code>, which can be used on separately on any element.</li>
<li>Added <code>hoverPause</code> option to temporarily stop slide rotation on hover.</li>
<li><code>$.jshowoff()</code> can now be invoked on any element and can take any child element as a 'slide'. Previously, only allowed <code><div></code>'s.</li>
<li>Added ability to customize slide link text via slide element's <code>title</code> attribute.</li>
<li>Added <code>controlText</code> parameter to allow custom text for controls (multi-language support, etc).</li>
<li>Added the <code>animatePause</code> option to specify whether to show the pause animation when pausing.</li>
<li>Changed a lot of dynamic markup and classes, skin CSS, and internal functions, so beware when upgrading. The plugin is still young, so it's subject to substantial change.</li>
</ul>
<p>0.1.1</p>
<ul>
<li>Added error check for <code>changeSpeed</code> set less than <code>speed</code>.</li>
<li>Added <code>cssClass</code> option to specify additional class on .jshowoff wrapper.</li>
<li>Now possible to invoke multiple instances, each with unique classes (for container, controls and links).</li>
</ul>
<p>0.1.0</p>
<ul>
<li>Initial release.</li>
</ul>
<h2>License</h2>
<p>jShowOff is free for personal and commercial use under the <a href="http://jquery.org/license">MIT/GPL license</a> used by the jQuery core libraries. Donations are appreciated, but not required (see 'Donate' button on the right). </p>
<h2>Author</h2>
<p>This plugin was written by <a href="http://ekallevig.com/about">Erik Kallevig</a>.</p>
</div><!--end #about-->
<div id="demo">
<div id="features">
<div><a href="http://google.com"><img src="http://farm5.static.flickr.com/4017/4303103738_a4745a3e6d_o.jpg" alt="Shore" /></a></div>
<div><img src="http://farm5.static.flickr.com/4062/4302354579_2a16dcb3cd_o.jpg" alt="Eddie" class="eddie" /><h2>HTML Slide</h2><p>Example of an HTML slide.</p><p>Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</p><p><a href="http://reddit.com">Learn More ›</a></p></div>
<div><a href="http://imgur.com"><img src="http://farm5.static.flickr.com/4067/4302354517_d72d321f17_o.jpg" alt="Flower" /></a></div>
<div><a href="http://gmail.com"><img src="http://farm3.static.flickr.com/2739/4303103822_a3b23ff7f5_o.jpg" alt="Fern" /></a></div>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#features').jshowoff(); });
</script>
<div id="action">
<p id="download"><a href="http://github.com/ekallevig/jShowOff/zipball/master">Download jShowOff Bundle</a></p>
<p id="version">Current Version: <strong>0.1.2</strong></p>
<p id="source">Source Files: <a href="http://github.com/ekallevig/jShowOff">github.com/ekallevig/jShowOff</a></p>
<div id="donate">
<p id="license">jShowOff is free for personal and commercial use under the <a href="http://jquery.org/license">MIT/GPL license</a> used by the jQuery core libraries. Donations are appreciated, but not required.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<p><input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
" />
<input type="image" src="http://imgur.com/TzN9Y.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /></p>
</form>
</div><!--end #donate-->
</div><!--end #action-->
<h2>Sliding Effect & Custom Labels Demo</h2>
<div id="slidingFeatures">
<div title="Shore"><a href="http://google.com"><img src="http://farm5.static.flickr.com/4017/4303103738_a4745a3e6d_o.jpg" alt="Shore" /></a></div>
<div title="Dog"><img src="http://farm5.static.flickr.com/4062/4302354579_2a16dcb3cd_o.jpg" alt="Eddie" class="eddie" /><h2>HTML Slide</h2><p>Example of an HTML slide.</p><p>Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</p><p><a href="http://reddit.com">Learn More ›</a></p></div>
<div title="Flower"><a href="http://imgur.com"><img src="http://farm5.static.flickr.com/4067/4302354517_d72d321f17_o.jpg" alt="Flower" /></a></div>
<div title="Fern"><a href="http://gmail.com"><img src="http://farm3.static.flickr.com/2739/4303103822_a3b23ff7f5_o.jpg" alt="Fern" /></a></div>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#slidingFeatures').jshowoff({
effect: 'slideLeft',
controlText:{play:'Reproducir',pause:'Pausar',previous:'Anterior',next:'Siguiente'},
hoverPause: false
}); });
</script>
<h2>Control-less, Effect-less Demo</h2>
<div id="basicFeatures">
<div title="Shore"><a href="http://google.com"><img src="http://farm5.static.flickr.com/4017/4303103738_a4745a3e6d_o.jpg" alt="Shore" /></a></div>
<div title="Dog"><img src="http://farm5.static.flickr.com/4062/4302354579_2a16dcb3cd_o.jpg" alt="Eddie" class="eddie" /><h2>HTML Slide</h2><p>Example of an HTML slide.</p><p>Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</p><p><a href="http://reddit.com">Learn More ›</a></p></div>
<div title="Flower"><a href="http://imgur.com"><img src="http://farm5.static.flickr.com/4067/4302354517_d72d321f17_o.jpg" alt="Flower" /></a></div>
<div title="Fern"><a href="http://gmail.com"><img src="http://farm3.static.flickr.com/2739/4303103822_a3b23ff7f5_o.jpg" alt="Fern" /></a></div>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#basicFeatures').jshowoff({
links: false,
controls: false,
effect: 'none',
cssClass: 'basicFeatures',
hoverPause: false
}); });
</script>
<h2>Re-styled Thumbnail Demo</h2>
<div id="thumbFeatures">
<div><a href="http://google.com"><img src="http://farm5.static.flickr.com/4056/4438272805_0abbbbaff2_o_d.jpg" alt="Mountain" /></a></div>
<div><a href="http://google.com"><img src="http://farm3.static.flickr.com/2754/4439049486_ec397f1d76_o_d.jpg" alt="Mountain" /></a></div>
<div><a href="http://imgur.com"><img src="http://farm5.static.flickr.com/4011/4439049454_d5e54a53f7_o_d.jpg" alt="Mountain" /></a></div>
<div><a href="http://gmail.com"><img src="http://farm3.static.flickr.com/2656/4438272741_b26665f2c4_o_d.jpg" alt="Mountain" /></a></div>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#thumbFeatures').jshowoff({
cssClass: 'thumbFeatures',
effect: 'slideLeft'
}); });
</script>
</div><!--end #demo-->
</div><!--end #wrap-->
<script type="text/javascript">
// fix pre overflow in IE
(function ($) {
$.fn.fixOverflow = function () {
if ($.browser.msie) {
return this.each(function () {
if (this.scrollWidth > this.offsetWidth) {
$(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
}
});
} else {
return this;
}
};
})(jQuery);
$('pre').fixOverflow();
</script>
</body>
</html>