forked from CSS-Tricks/AnythingSlider
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
623 lines (540 loc) · 33 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
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
<!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>AnythingSlider</title>
<!-- jQuery (required) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- Anything Slider optional plugins -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script type="text/javascript" src="js/swfobject.js"></script>
<!-- Anything Slider -->
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="css/anythingslider.css" type="text/css" media="screen" />
<!-- Demo stuff -->
<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<script type="text/javascript">
// 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',
onSlideComplete : function(slider){
// alert('Welcome to Slide #' + slider.currentPage);
}
});
$('#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>
<script type="text/javascript">
// Demo functions
// **************
$(function(){
// External Link
$("#slide-jump").click(function(){
$('#slider2').anythingSlider(4);
return false;
});
// Report Events to console & features list
$('.anythingSlider').bind('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();
if (!$('link[href*=' + theme + ']').length) {
$('body').append('<link rel="stylesheet" href="css/theme-' + theme + '.css" type="text/css" media="screen" />');
}
$('#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="images/slide-tele-' + (++imageNumber%2 + 1) + '.jpg" alt="" /></li>')
.anythingSlider(); // update the slider
});
$('button.remove').click(function(){
$('#slider1 > li:not(.cloned):last').remove();
$('#slider1').anythingSlider(); // update the slider
});
});
</script>
</head>
<body>
<a id="ribbon1" href="demos.htm"></a>
<div id="page-wrap">
<a href="http://github.com/ProLoser/AnythingSlider/downloads" id="dl">Download Latest on Github</a>
<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</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="images/slide-civil-1.jpg" alt="" /></li>
<li><img src="images/slide-env-1.jpg" alt="" /></li>
<li><img src="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><object width="640" height="385"><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="640" height="385"></embed></object></li>
<li><img src="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="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="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="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).</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 playing YouTube videos when not in view and resumes them when in view (if files are hosted on the web).</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.htm">demo page</a>.</li>
</ul>
<h2>Default Options</h2>
<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?
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
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
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)
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>Setup</h2>
<ul>
<li><h3>Add the following inside the <code><head></head></code> of your page</h3>
<blockquote>
<pre><!-- Required -->
<link type="text/css" href="css/anythingslider.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<script type="text/javascript">
$(function () {
$('#slider1').anythingSlider(); // add any non-default options here
});
</script>
<!-- Optional -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script></pre>
</blockquote>
</li>
</ul>
<ul>
<li><h3>Example HTML</h3>
<blockquote>
<pre> <ul id="slider1">
<li><div class="text">Put anything you want here</div></li>
<li><img src="image1.jpg" /></li>
<li><object>...</object></li>
<li>
<div class="list">
<h4>Title</h4>
<ul>
<li>List item #1</li>
<li>List item #2</li>
</ul>
</div>
</li>
</ul></pre>
</blockquote>
</li>
</ul>
<h2>Usage</h2>
<ul>
<li><h3>Updating the Slider (content added or removed)</h3>
<ul>
<li>Any options added inside the anythingSlider call will be ignored.</li>
<li>Note that if you are removing any panels from AnythingSlider, make sure your script ignores the cloned panels (they have a 'cloned' class). See this page's source for an example.</li>
</ul>
<blockquote>
<pre>$('#slider1')
.append('<li><img src="some-image.jpg" alt="" /></li>') // add a new panel to the slider
.anythingSlider(); // update the slider</pre>
</blockquote>
</li>
<li><h3>Getting Current Slide Number:</h3>
<blockquote>
<pre>var current = $('#slider1').data('AnythingSlider').currentPage; // returns page #</pre>
</blockquote>
</li>
<li><h3>Setting Current Slide (external link example):</h3>
<blockquote>
<pre><a href="#" id="slide-jump">Slide 4</a></pre>
<pre>$("#slide-jump").click(function(){
$('#slider2').anythingSlider(4);
});</pre>
</blockquote>
</li>
<li><h3>External Slideshow Control</h3>
<blockquote>
<pre>$('#slider1').data('AnythingSlider').startStop(true); // start the slideshow
$('#slider2').data('AnythingSlider').startStop(false); // stops the slideshow
$('#slider1').data('AnythingSlider').goForward(); // go forward one slide
$('#slider1').data('AnythingSlider').goBack(); // go back one slide
</pre>
</blockquote>
</li>
<li><h3>Extending - Event Hooks (callback functions)</h3>
<div class="alert"><b>Note:</b> In version 1.4.4, the bind function returned arguments were changed to make more straightforward values available, see the <a href="#callbacks">callback arguments</a> section below.</div>
<br>
<blockquote>
<ul>
<li><code>before_initialize</code> (<code>onBeforeInitialize</code>) - triggered right after creating the anythingSlider object. *<a href="#note-before-init">See Note</a>.</li>
<li><code>initialized</code> (<code>onInitialized</code>) - triggered after creating the anythingSlider object.</li>
<li><code>slideshow_start</code> (<code>onShowStart</code>) - slideshow started.</li>
<li><code>slideshow_stop</code> (<code>onShowStop</code>) - slideshow stopped.</li>
<li><code>slideshow_paused</code> (<code>onShowPause</code>) - slideshow paused.</li>
<li><code>slideshow_unpaused</code> (<code>onShowUnpause</code>) - slideshow unpaused - may not trigger properly or match a pause event if user clicks play/stop button.</li>
<li><code>slide_init</code> (<code>onSlideInit</code>) - triggered when panel slide is initialized (before controls animate).</li>
<li><code>slide_begin</code> (<code>onSlideBegin</code>) - triggered before panel slide animation.</li>
<li><code>slide_complete</code> (<code>onSlideComplete</code>) - triggered after panel slide animation.</li>
</ul>
<a id="note-before-init"></a>
* Please note that at when the <code>onBeforeInitialize</code> event triggers/callback is called, almost nothing has been set:
<blockquote>
<ol>
<li>The <code>anythingSlider</code> object has been attached to the <code>ul</code>.</li>
<li>The class <code>anythingBase</code> was added to the <code>ul</code>.</li>
<li>The <code>ul</code> was wrapped in two <code>div</code>s (<code>div.anythingSlider div.anythingWindow</code>).</li>
</ol>
That's it! If you want to use some anythingSlider functionalities, you probably want to wait for the initialization to be completed (and register to the event <code>initialized</code> or use the <code>onInitialized</code> option).
</blockquote>
</blockquote>
<br>
<span class="header">Binding to Events and using Callbacks:</span>
<br>You can bind to any of the custom event triggers as follows (see this page source for another example):<br>
<br>
<blockquote>
<pre>$('#slider1').bind('slide_complete', function(e, slider){
$('#status').text( 'Now on page #' + slider.currentPage );
// Do something else
});
</pre>
</blockquote>
<br>
<blockquote>
<pre>$('.anythingSlider').bind('slideshow_start slideshow_stop', function(e, slider){
var msg = (e.type == "slideshow_start") ? 'Someone started the #^&%$! slideshow!' : 'Whew, thanks for stopping the slideshow';
$('#status').text( msg );
});
</pre>
</blockquote>
or use one of the callback functions:
<br><br>
<blockquote>
<pre>$('#slider').anythingSlider({
onSlideComplete : function(slider){
alert('Welcome to Slide #' + slider.currentPage);
}
})
</pre>
</blockquote>
<a id="callbacks"></a>
<span class="header">Callback Arguments</span> ( examples are if you use "slider" in the callback function, e.g. function(slider){...}, or in the trigger function, e.g. function(e, slider){...} )
<br><br>
<blockquote>
<table class="data">
<tr><th class="col">Argument</th><th>Description</th></tr>
<tr><td>slider.$currentPage</td><td>jQuery object of the Target page - not the same page as "slider.currentPage".</td></tr>
<tr><td>slider.$lastPage</td><td>jQuery object of the starting page - same page as "slider.currentPage" until "slide_complete" is called.</td></tr>
<tr><td>slider.currentPage</td><td>Currently displayed page/slide number. Updated when the animation completes.</td></tr>
<tr><td>slider.pages</td><td>Number of pages contained in the slider.</td></tr>
<tr><td>slider.playing</td><td>Is true if the slideshow is currently playing (is false when slideshow is paused, but true while youtube video is playing).</td></tr>
<tr><td>slider.hovered</td><td>Is true if the slider is currently being hovered.</td></tr>
<tr><td>slider.options.{name}</td><td>Access any of the options (e.g. slider.options.theme). Trying to set the options this way may break the slider.</td></tr>
</table>
</blockquote>
</li>
<br>
<li><h3><a id="format"></a>Formatting Navigation Text</h3>
To use the <code>navigationFormatter</code> option, you must have a function that accepts two parameters, and returns a string of HTML text.<br>
<br>
<ul>
<li><code>index</code> = integer index (1 based);</li>
<li><code>panel</code> = jQuery wrapped LI item this tab references.</li>
<li>Function must return a string of HTML/Text.</li>
<li>Here is a sample formatter (view this page source for another example):<br>
<br>
<blockquote>
<pre>$('#slider').anythingSlider({
navigationFormatter : function(index, panel){
return " Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
}
})</pre>
</blockquote>
</li>
</ul>
</li>
</ul>
<h2>Changelog</h2>
<h3>Version 1.5.1</h3>
<ul>
<li>Added <code>enableKeyboard</code> option which will allow you to disable keyboard navigation controls. Added because if you have a slideshow with no clickable controls, using the keyboard will stop the slideshow and there is no way to start it back up.</li>
<li>Added <code>enableNavigation</code> option which, when false, will allow visible navigation links to be unclickable. You'll have to change the CSS to stop the hover effect.</li>
<li>Added <code>enablePlay</code> option which, when false, will allow a visible play/stop button to be unclickable. You'll have to change the CSS to stop the hover effect.</li>
<li>Fixed a problem with clicking control links inside a slider (links that take the slider to other panels). This also required that all links in the cloned panels are modified (changed into spans) - this will mess up any FX you add to these links but only in the first and last panels.</li>
<li>Added the following four changes that <a href="https://github.com/midu/AnythingSlider">Midu</a> (Stefano B) made in his branch. Thanks for the great mods! I would have just merged your changes into the core, but I still suck at using git LOL :P</li>
<li>Added <code>appendControlsTo</code> which allows you to attach the slider controls (navigation tabs & play/stop button) to another object on the page. This wasn't throughly tested, but I know you'll need to include custom CSS to style these links outside the slider.</li>
<li>Added event hook & callback <code>before_initialize</code> (<code>onBeforeInitialize</code>) which is triggered immediately after the slider is initialized, <a href="#note-before-init">see the note</a> above for more details.</li>
<li>Added event hook & callback <code>initialized</code> (<code>onInitialized</code>) which is triggered after the AnythingSlider has completed its setup.</li>
<li>Optimized how callbacks functions are called - you shouldn't notice a difference.</li>
</ul>
<h3>Version 1.5</h3>
<ul>
<li>Modified core to allow updating the AnythingSlider content (change the number of slides).</li>
</ul>
<h3>Version 1.4.8</h3>
<ul>
<li>Added an optional extension "AnythingSlider FX" to add animation effects to each panel.</li>
<li>Added an <a href="demos.htm">AnythingSlider FX demo page</a> with examples, code, and multiple methods to achieve the same effects. Thanks to Paal Joachim for input on which demos were needed.</li>
<li>Added <code>activePage</code> class to the visible slider; but it is not updated until just before the <code>slide_complete</code> event.</li>
<li>Fixed a bug where setting <code>buildArrows</code> to false and <code>toggleArrows</code> to true would cause errors.</li>
</ul>
<h3>Version 1.4.7</h3>
<ul>
<li>Added jQuery Objects for <code>$currentPage</code> and <code>$lastPage</code> which are accessible to the bind & callback functions for easy access to the pages. Added these callback arguments and more detail to the information above.</li>
<li>Improved the hash tag code so it will now work with multiple AnythingSliders on the page. The hash tag will still only update when clicking on the navigation links and not the navigation arrows.</li>
</ul>
<h3>Version 1.4.6</h3>
<ul>
<li>SWFObject script (swfobject.js) is now a required dependency to make YouTube videos pause when not in view & resume play when in view. This was added so IE will also have this functionality.</li>
<li>Commented out previous code which added the above YouTube functionality to non-IE browsers. Will consider completely removing it if users are okay with the SWFObject script dependency.</li>
</ul>
<h3>Version 1.4.5</h3>
<ul>
<li>Added Curtis Scott's Portfolio theme from <a href="http://www.curtisscott.com/portfolio.html">his site</a>. Thanks for sharing! - don't use the control toggle option as it messes up the page layout.</li>
<li>Fixed the flickering problem that was occuring when the slider moved from the last slide to the first.</li>
</ul>
<h3>Version 1.4.4</h3>
<ul>
<li>Added CSS to fix a problem with CSS3 transitions occurring during the animation. Added <code>noTransitions</code> class to the arrows, navigation and slider.</li>
<li>Added callback functions: <code>onShowStart</code>, <code>onShowStop</code>, <code>onShowPause</code>, <code>onShowUnpause</code>, <code>onSlideInit</code>, <code>onSlideBegin</code> & <code>onSlideComplete</code>.</li>
<li>Added instructions on callback argument useage as values and access to internal functions.</li>
<li>Changed triggered event callback argument to make using them easier - see the Event Hooks section above.</li>
</ul>
<h3>Version 1.4.3</h3>
<ul>
<li>Added options to modify interactivity: <code>clickArrows</code>, <code>clickControls</code> & <code>clickSlideshow</code>.</li>
<li>Added custom events - slideshow start, stop, pause & unpause as well as slide begin, start & stop. See the "Extending - Event Hooks" section above for a more detailed description.</li>
<li>Updated instructions on how to use custom events.</li>
</ul>
<h3>Version 1.4.2</h3>
<ul>
<li>Added <code>addWmodeToObject</code>. When a slider has an embedded object (like a youtube video), the script adds a wmode parameter with the value from this option ("opaque" by default).</li>
</ul>
<h3>Version 1.4.1</h3>
<ul>
<li>Added <code>theme</code> option and several themes. Themes can now be added to individual AnythingSliders (although they are based largely on CSS).</li>
<li>Added <code>tooltipClass</code> option which adds the assigned class name to the navigation and play/stop button only if the text is hidden (negative text-indent). The tooltip plugin must be added separately.</li>
<li>Added <code>toggleArrows</code> option. This option (if true) will slide out (reveal) the arrows while hovering & hide them at other times.</li>
<li>Added <code>toggleControls</code> option. This option (if true) will slide down (reveal) the navigation links and play/stop button while hovering & hide them at other times. Adding this option required a new "anythingControls" class that wraps both the navigation links and the play/stop button.</li>
</ul>
<h3>Version 1.4</h3>
<ul>
<li>Added <code>maxOverallWidth</code> option. This sets the max width (in pixels) of all combined sliders (side-to-side) due to problems with Opera.</li>
<li>Added new classes to the base UL ("anythingBase") and its immediate children LIs ("panels") to reduce and clarify the CSS.</li>
<li>Added hover class to arrows and start/stop button to indicate the link has focus (while tabbing through the page).</li>
<li>Fixed flickering problem completely :P - numerous changes made to script & CSS.</li>
<li>Bumped version to 1.4 because of significant differences from version 1.3.</li>
</ul>
<h3>Version 1.3.7</h3>
<ul>
<li>Added <code>startPanel</code> option.</li>
<li>Added <code>playRtl</code> option to reverse the play direction.</li>
<li>Added back <code>stopAtEnd</code> option (it was added in a previous version).</li>
<li>Added <code>resumeOnVideoEnd</code> option to prevent an active slideshow from pausing a video.</li>
<li>Changed location of reverse reference from the wrapping div to the original ul - updated instructions (see Getting current slide; previously you had to reference <code>$('.anythingSlider:eq(0)')</code>.</li>
<li>Fixed height/width options to accept strings (e.g. "400px" instead of a number, it may not work properly if values are other than the numnber of pixels).</li>
<li>Fixed setting to accept strings (e.g. $(slider).anythingSlider(" 1 ")) as well as numbers.</li>
<li>Fixed problem with objects (youtube videos) flickering in Firefox by setting <code>resizeContent</code> to false.</li>
<li>Fixed problem that occurs when using an incorrect easing function name (<a href="http://dev.jquery.com/ticket/7064">submitted ticket</a>)</li>
<li>Reorganized, cleaned up the code and updated the demos & instructions.</li>
</ul>
<h3>Version 1.3.6</h3>
<ul>
<li>Fixed minor bug with links to specific slides and updated example to reflect changes and be less confusing</li>
<li>Tweaked start/stop button css to be more maleable</li>
</ul>
<h3>Version 1.3.5</h3>
<ul>
<li>Added resizePanel option - does not support percentage sizing.<br><br>
<ul>
<li>When true, it will resize all panels & solitary content to the size settings (CSS or the script options).</li>
<li>When false, the AnythingSlider wrapper will resize to fit the panel (set inline or in the CSS for each panel).</li>
</ul>
</li>
<li>Fixed keyboard navigation to work with multiple AnythingSliders on a page.</li>
<li>Added tabbed navigation. Both the links within panels and the thumbnail navigation will activate it.</li>
</ul>
<h3>Version 1.3.4</h3>
<ul>
<li>Added keyboard navigation</li>
<li>Embeded objects will now resize to fit the panel</li>
<li>YouTube videos will pause the video when it is not in view and play (if already started) when in view (in non-IE browsers)<br>
*Note: this feature only works when the files are hosted on a webserver as the flash player restricts calls between local files and the internet.
</li>
<li>Modified code according to JSLint & added minified version.</li>
</ul>
<h3>Version 1.3.3</h3>
<ul>
<li>Previous / Next arrows are now optional</li>
<li>Clicking start button immediately begins transition instead of waiting for the delay</li>
</ul>
<h3>Version 1.3.2</h3>
<ul>
<li>Greatly refactored CSS for a more fluid resizing behavior</li>
<li>Dimensions can be passed via javascript or modified at the top of the css file</li>
<li>Merged all Github forks</li>
<li>Wrapper DIVs (<div class="anythingSlider"><div class="wrapper">) no longer required in html. Divs are generated in jquery</li>
<li>Improved CSS scope and classes, Javascript degredation is handled differently now however</li>
<li>Greatly refactored CSS for a more fluid resizing behavior</li>
<li>Hash URLS now work for multiple panels</li>
</ul>
<h3>Version 1.3</h3>
<ul>
<li>Accessibility improvements by Matt Lawson</li>
<li>Some generic JavaScript/HTML/CSS code cleaning</li>
<li>Moved to GitHub entirely</li>
<li>Ensures unique panel ID's</li>
<li>Removes navigation if there is only one panel</li>
<li>Added option to stop on the last page when autoPlay is set to true</li>
</ul>
<h3>Version 1.2</h3>
<ul>
<li>Bug Fix: When autoPlay was set to false, any interaction with the control would cause a javascript error.</li>
</ul>
<h3>Version 1.1</h3>
<ul>
<li>Changed default easing to "swing" so didn't depend on any other plugins</li>
<li>Removed extra junk (other plugins used for design, etc)</li>
<li>Added Pause on Hover option</li>
<li>Added options for passing in HTML for the start and stop button</li>
<li>Added option to use custom function for formatting the titles of the navigation</li>
<li>Added public interface for linking directly to certain slides</li>
</ul>
<h3>Version 1.0</h3>
<ul>
<li>First version</li>
</ul>
</div>
</body>
</html