forked from CSS-Tricks/AnythingSlider
/
index.html
453 lines (388 loc) · 24.2 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
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AnythingSlider</title>
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Anything Slider optional plugins -->
<script src="js/jquery.easing.1.2.js"></script>
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="js/swfobject.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="demos/css/page.css" media="screen">
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<!-- Ideally, add the stylesheet(s) you are going to use here,
otherwise they are loaded and appended to the <head> automatically and will over-ride the IE stylesheet below -->
<link rel="stylesheet" href="css/theme-metallic.css">
<link rel="stylesheet" href="css/theme-minimalist-round.css">
<link rel="stylesheet" href="css/theme-minimalist-square.css">
<link rel="stylesheet" href="css/theme-construction.css">
<link rel="stylesheet" href="css/theme-cs-portfolio.css">
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
<script>
// Demo functions
// **************
$(function(){
// External Link with callback function
$("#slide-jump").click(function(){
$('#slider2').anythingSlider(4, function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
return false;
});
// External Link
$("a.muppet").click(function(){
$('#slider1').anythingSlider(5);
$(document).scrollTop(0);
return false;
});
// Report Events to console & features list
$('#slider1, #slider2').bind('before_initialize initialized swf_completed slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete', function(e, slider){
// show object ID + event (e.g. "slider1: slide_begin")
var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
$('#status').text(txt);
if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
});
// Theme Selector (This is really for demo purposes only)
var themes = ['minimalist-round','minimalist-square','metallic','construction','cs-portfolio'];
$('#currentTheme').change(function(){
var theme = $(this).val();
$('#slider1').closest('div.anythingSlider')
.removeClass( $.map(themes, function(t){ return 'anythingSlider-' + t; }).join(' ') )
.addClass('anythingSlider-' + theme);
});
// Add a slide
var imageNumber = 1;
$('button.add').click(function(){
$('#slider1')
.append('<li><img src="demos/images/slide-tele-' + (++imageNumber%2 + 1) + '.jpg" alt="" /></li>')
.anythingSlider(); // update the slider
});
$('button.remove').click(function(){
if ($('#slider1').data('AnythingSlider').pages > 1) {
$('#slider1 > li:not(.cloned):last').remove();
$('#slider1').anythingSlider(); // update the slider
}
});
});
</script>
<script>
// Set up Sliders
// **************
$(function(){
$('#slider1').anythingSlider({
startStopped : true, // If autoPlay is on, this can force it to start stopped
width : 800, // Override the default CSS width
theme : 'metallic',
easing : 'easeInOutBack',
// autoPlayLocked : true, // If true, user changing slides will not stop the slideshow
// resumeDelay : 10000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
onSlideComplete : function(slider){
// alert('Welcome to Slide #' + slider.currentPage);
},
stopAtEnd : true,
onShowStop : function(e, slider){
setTimeout(function(){
if (slider.currentPage === slider.pages) { slider.gotoPage(1); }
}, 5000);
}
});
$('#slider2').anythingSlider({
width : 600, // if resizeContent is false, this is the default width if panel size is not defined
height : 350, // if resizeContent is false, this is the default height if panel size is not defined
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
startStopped : true, // If autoPlay is on, this can force it to start stopped
navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'][index - 1];
}
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="nav">
<a class="current" href="index.html">Main Demo</a>
<a href="simple.html">Simple Demo</a>
<a href="demos.html">FX Demos</a>
<a class="play" href="http://jsfiddle.net/Mottie/JMgeC/">Playground</a>
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
</div>
<h5><a href="http://css-tricks.com/examples/AnythingSlider/">Original</a> By <a href="http://css-tricks.com">Chris Coyier</a>, based upon lots of smart stuff by <a href="http://jqueryfordesigners.com/">Remy Sharp</a>,<br>
significantly improved by <a href="http://pixelgraphics.us/">Douglas Neiner<br></a>
improved again by <a href="http://github.com/ProLoser/">ProLoser</a> and <a href="http://github.com/Mottie/">Mottie</a></h5>
<h1>AnythingSlider</h1>
<div class="themeselector">
Theme:
<select id="currentTheme">
<option value="default">Default</option>
<option value="minimalist-round">Minimalist-Round</option>
<option value="minimalist-square">Minimalist-Square</option>
<option value="metallic" selected="selected">Metallic</option>
<option value="construction">Construction</option>
<option value="cs-portfolio">CS-Portfolio</option>
</select>
<button class="add">Add Slide</button>
<button class="remove">Remove Slide</button>
</div>
<br><br>
<!-- AnythingSlider #1 -->
<ul id="slider1">
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
<li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
<li class="panel5">
<div class="textSlide">
<span class="rightside" style="padding-right: 50px;"><object width="500" height="325"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="325"></embed></object></span>
<h3>Other Information</h3>
<br>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
<li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
<li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
<li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
</ul>
</div>
</li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
</ul> <!-- END AnythingSlider #1 -->
<br><br>
<!-- AnythingSlider #2 -->
<ul id="slider2">
<li class="panel1">
<div class="textSlide">
<img src="demos/images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
<h4>Ingredients</h4>
<ul>
<li>1 bagel, split and toasted</li>
<li>2 tablespoons cream cheese</li>
<li>1 roma (plum) tomatoes, thinly sliced</li>
<li>salt and pepper to taste</li>
<li>4 leaves fresh basil</li>
</ul>
</div>
</li>
<li class="panel2">
<div class="quoteSlide">
<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<br>-- Les Dawson</blockquote>
</div>
</li>
<li class="panel3">
<img src="demos/images/slide-tele-1.jpg" alt="">
</li>
<li class="panel4">
<div class="quoteSlide">
<blockquote>Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
</div>
</li>
<li class="panel5">
<img src="demos/images/slide-tele-2.jpg" alt="">
</li>
</ul>
<!-- END AnythingSlider #2 -->
<h2>Features</h2>
<ul>
<li>Panels are HTML Content (can be anything).</li>
<li>Multiple AnythingSliders allowable per-page.</li>
<li>Add or remove content, then easily update the slider.</li>
<li>Themes can be applied to individual sliders.</li>
<li>Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide). This can be disabled.</li>
<li>Optionally resize each panel (specified per panel in css).</li>
<li>Optional Next / Previous Panel Arrows.</li>
<li>Use keyboard navigation or tabs that are built and added dynamically (any number of panels).</li>
<li>Link to specific slides or go forward or back one slide from static text links - go to <a href="#" id="slide-jump">Slide 4</a> (Quote #2) in second example.</li>
<li>Each panel has a hashtag (can link directly to specific panels).</li>
<li>Optional custom function for <a href="#format">formatting navigation text</a>.</li>
<li>Auto-playing slideshow (optional feature, can start playing or stopped).</li>
<li>Pauses slideshow on hover (optional).</li>
<li>Optionally play the slideshow once through, stopping on the last page.</li>
<li>Extend the script by binding to custom events, last triggered event: <span id="status">none</span></li>
<li>Optional FX extension to add animation to panels elements as they scroll into and out of view. See the <a href="demos.html">demo page</a>.</li>
<li>Optional Video extension allows video to pauses playing when not in view and resumes when in view (if files are hosted on the web). This currently works for YouTube, Vimeo and HTML5 video.</li>
<li>Works with jQuery 1.4+, but can be made to work with jQuery v1.3.2 by uncommenting code (in the non-minified version).</li>
</ul>
<h2>Default Options</h2>
See the documentation for complete description of these options (<a href="https://github.com/ProLoser/AnythingSlider/wiki/Appearance-Options">appearance</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Navigation-Options">navigation</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Slideshow-Options">slideshow</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Callbacks-and-Events">callbacks & events</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Interactivity-and-Miscellaneous-Options">interativity & misc</a>).<br>
<br>
<blockquote>
<pre>$('#slider1, #slider2').anythingSlider({
// Appearance
width : null, // Override the default CSS width
height : null, // Override the default CSS height
resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
tooltipClass : 'tooltip', // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
theme : 'default', // Theme name
themeDirectory : 'css/theme-{themeName}.css', // Theme directory & filename {themeName} is replaced by the theme value above
// Navigation
startPanel : 1, // This sets the initial panel
hashTags : true, // Should links change the hashtag in the URL?
infiniteSlides : true, // if false, the slider will not wrap
enableKeyboard : true, // if false, keyboard arrow keys will not work for the current panel.
buildArrows : true, // If true, builds the forwards and backwards buttons
toggleArrows : false, // if true, side navigation arrows will slide out on hovering & hide @ other times
buildNavigation : true, // If true, builds a list of anchor links to link to each panel
enableNavigation : true, // if false, navigation links will still be visible, but not clickable.
toggleControls : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
appendControlsTo : null, // A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
navigationFormatter : null, // Details at the top of the file on this use (advanced use)
forwardText : "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
backText : "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
// Slideshow options
enablePlay : true, // if false, the play/stop button will still be visible, but not clickable.
autoPlay : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
autoPlayLocked : false, // If true, user changing slides will not stop the slideshow
startStopped : false, // If autoPlay is on, this can force it to start stopped
pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
resumeOnVideoEnd : true, // If true & the slideshow is active & a youtube video is playing, the autoplay will pause until the video completes
stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
playRtl : false, // If true, the slideshow will move right-to-left
startText : "Start", // Start button text
stopText : "Stop", // Stop button text
delay : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
resumeDelay : 15000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
animationTime : 600, // How long the slideshow transition takes (in milliseconds)
easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin
// Callbacks
onBeforeInitialize : null, // Callback before the plugin initializes
onInitialized : null, // Callback when the plugin finished initializing
onShowStart : null, // Callback on slideshow start
onShowStop : null, // Callback after slideshow stops
onShowPause : null, // Callback when slideshow pauses
onShowUnpause : null, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
onSlideInit : null, // Callback when slide initiates, before control animation
onSlideBegin : null, // Callback before slide animates
onSlideComplete : null, // Callback when slide completes
// Interactivity
clickArrows : "click", // Event used to activate arrow functionality (e.g. "click" or "mouseenter")
clickControls : "click focusin", // Events used to activate navigation control functionality
clickSlideshow : "click", // Event used to activate slideshow play/stop button
// Misc options
addWmodeToObject : "opaque", // If there is an embedded object & swfobject.js is active, the script will automatically add this wmode parameter
maxOverallWidth : 32766 // Max width (in pixels) of combined sliders (side-to-side); set to 32766 to prevent problems with Opera
});</pre>
</blockquote>
<h2>Known Issues</h2>
<ul>
<li>When AnythingSlider is initialized on a hidden element, the last slide will show instead of the first. This is because a <code>scrollLeft</code> value cannot be applied to a hidden element. So either initialize it with visibility hidden, or if that isn't possible, then set the scrollLeft when it becomes visible:
<blockquote>
<br>
<pre>var s = $('#slider1').data('AnythingSlider');
s.$window.scrollLeft( s.$window.width() + s.easingMargin ); // may not work if resizeContents is false (width will vary)</pre>
</blockquote>
</li>
</ul>
<h2>Changelog</h2>
Only the latest version will be shown here. See the <a href="https://github.com/ProLoser/AnythingSlider/wiki/Change-Log">full change log here</a>.<br>
<br>
<h3>Version 1.5.12</h3>
<ul>
<li>Fixed a problem with the "activePage" class being added to the wrong page/panel when the <code>infiniteSlides</code> option is <code>false</code>.</li>
</ul>
<h3>Version 1.5.11</h3>
<ul>
<li>Updated all demos files to a HTML5 doctype with jQuery v1.6.</li>
<li>Removed print stylesheet.</li>
<li>Made file extension .html consistent.</li>
<li>Added "simple.html", which is the simplest possible demo so it is easier for people to build from.</li>
<li>Added a menu to each page for easier navigation to other demos and documentation.</li>
</ul>
<h3>Version 1.5.10</h3>
<ul>
<li>Fixed a bug that triggers the <code>slideshow_stop</code> event and <code>onShowStop</code> callback after each slide change. It now properly triggers after a running slideshow has stopped.</li>
<li>Changed code to completely remove the empty slides when <code>infiniteSlides</code> is false. It was code that was unnecessarily left in.</li>
<li>Changed code that replaced links in the cloned panels with code that disables the links - fix for issue #59.</li>
<li>Added a stylesheet to fix the theme problems in IE7 - fix for issue #71.
<ul>
<li>I'm not sure if this solution works for IE6.</li>
<li>One problem was that the navigation links have a negative text-indent. IE7 sends the entire link off-screen instead of just the text inside.</li>
<li>Fixed by wrapping all link text in a span and applying the negative text indent to the span instead of the link.</li>
<li>The second problem with the navigation arrows being cut off was due to the negative top marginl. So a separate conditionally loaded stylesheet was added with the top margin set to zero and a specific top percentage for each style.</li>
</ul>
</li>
<li>Added <code>width: 100%</code> to the second slider's fourth panel instead of leaving the width/height undefined. In IE7, it would make the panel 20 pixels wide - fix for issue #73.</li>
<li>Fx Extension changes:
<ul>
<li>Fixed Fx Caption problem with FX not working when moving from first panel to last panel - fix for issue #75.</li>
<li>Fixed Fx caption to now show hidden ("display:none") captions. When clicking on the "x" in the caption, it was hiding the captions permanently, now it doesn't.</li>
<li>Changed FX Extension custom FX <code>time</code> to what it should have been, <code>duration</code>. To match the animation option.</li>
</ul>
</li>
</ul>
<h3>Version 1.5.9</h3>
<ul>
<li>Silly bug fix that broke the navigation tabs - thanks to Hyland3r for pointing it out!</li>
</ul>
<h3>Version 1.5.8</h3>
<ul>
<li>Added a primitive print stylesheet. Optimized using Firefox & IE9 print preview. But when using IE9 compatibility modes, it works IE7, but not IE8 (entire slider is hidden).</li>
<li>Slider controls are now hidden in the css, to prevent the flash seen before a theme stylesheet is loaded. This can be prevented by added the theme stylesheet into the head of your document.</li>
<li>Changed theme stylesheet to be appended into the document head.</li>
<li>Fixed some of the theme stylesheets so the navigtion links now show in IE8, but still not in IE7 - see known issues above.</li>
<li>Fixed a problem where the active slider would move when using arrow keys inside a text area or input.</li>
<li>Fixed animating arrow opacity bug - fix for issue #60.</li>
<li>Fixed easing on the first slide. Fix for issue #61.</li>
<li>`currentPage` now shows the correct number during events. Fix for issue #69.(</li>
<li>Fixed a minor problem with the FX extension fade. Regular base FX expect a size to be the second parameter, and since there is no size for 'fade' it now uses the second parameter for time. So, now this is possible:
<blockquote>
<pre>$('#slider1')
.anythingSlider({
animationTime : 0
})
.anythingSliderFx({
'.panel' : [ 'fade', 1000, 'easeOutCirc' ] // target the entire panel
});</pre>
</blockquote>
The above code will fade out the current panel and fade in the next. But it does require some extra CSS to set the opacity of all panels to zero, otherwise the fading animation won't occur until the second time through the panels.
<blockquote>
<pre><style type="text/css">
#slider1 .panel { opacity: 0; }
#slider1 .panel.activePage { opacity: 1; } /* make sure active panel is visible */
</style></pre>
</blockquote>
It's not ideal, but it does make it possible to have a fade transition between slides, just not a crossfade transition.
</li>
</ul>
<h3>Version 1.5.7.4</h3>
<ul>
<li>Added a license.</li>
</ul>
<h3>Version 1.5.7.3</h3>
<ul>
<li>Remove all ids in cloned panels - attempt to fix issue #59.</li>
</ul>
<h3>Version 1.5.7.2</h3>
<ul>
<li>Adjusted some css to replace the bottom border in other themes when the slider is not at default size.</li>
<li>Adjusted Portfolio css theme to not hide the control bar.</li>
</ul>
<h3>Version 1.5.7.1</h3>
<ul>
<li>Added css to fix RTL pages breaking the slider - fix for issue #57.</li>
<li>Added <code>overflow:hidden</code> to the anythingslider wrapper to prevent Opera and Safari from adding a horizontal scrollbar.</li>
</ul>
<h3>Version 1.5.7</h3>
<ul>
<li>Added <code>infiniteSlides</code> option. Fix for issue #58.
<ul>
<li>When true, the slider acts like an infinite slider.</li>
<li>When false, the slides stop at the first and last panel, even the slideshow.</li>
<li>The first and last panels are no longer cloned when this option is false. Blank panels were added in place.</li>
<li>When the slider is on the first or last panel, the slider will display a "rewind" effect if the <code>stopAtEnd</code> option is false.</li>
<li>When the slider is on the first or last panel and the <code>stopAtEnd</code> option is true, the back and forward arrow keys (respectively) will have a "disabled" class applied - modified in the css.</li>
</ul>
<li>Replace appropriate code to make AnythingSlider backwards compatible with jQuery 1.3.2, but you'll need to uncomment out the portion at the end. You'll have to add it manually to the minified version. Sort of fix for issue #38.</li>
<li>Removed callback functions set to "null" in the default options to reduce the file size. The callbacks will still work.</li>
<li>Modified bits of the code to appease the JSLint gods.</li>
</ul>
</div>
</body>
</html>