[Pkg-javascript-commits] [SCM] Collection of jQuery plugins branch, master, updated. 3635a4f7025502e6da3f4433dab2f535db8175d7
Agustin Henze
tin at sluc.org.ar
Fri Jan 11 21:31:32 UTC 2013
The following commit has been merged in the master branch:
commit c98e87119f3d91ec7cad70489a092e5750449511
Author: Agustin Henze <tin at sluc.org.ar>
Date: Fri Jan 11 16:21:44 2013 -0300
Add upstream version of jQuery Slides
diff --git a/slides/README.textile b/slides/README.textile
new file mode 100644
index 0000000..9b04350
--- /dev/null
+++ b/slides/README.textile
@@ -0,0 +1,116 @@
+h1. Slides, A Slideshow Plugin for jQuery
+
+Slides is a crazy simple slideshow plugin for jQuery. With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination.
+
+With Slides you'll never see multiple slides fly by. Slides elegantly just slides from one slide to the next. Awesome.
+
+Check out "http://slidesjs.com/":http://slidesjs.com/ for full instructions and examples.
+
+Give it a try and if you have a question or find a bug <a href="http://github.com/nathansearles/slides/issues">hit me up</a> at GitHub or <a href="mailto:nsearles at gmail.com">shoot me an email</a>..
+
+Slides is compatible with all modern web browsers including; Internet Explorer 7/8/9, Firefox 3+, Chrome, Safari and Mobile Safari. And it'll even work in our old friend IE6.
+
+h2. Info
+
+Developed by "Nathan Searles":mailto:nsearles at gmail.com, "http://nathansearles.com":http://nathansearles.com
+
+For updates, follow Nathan Searles on "Twitter":http://twitter.com/nathansearles
+
+Slides is licensed under the "Apache license":http://www.apache.org/licenses/LICENSE-2.0.
+
+h2. Examples and Instructions
+
+These examples are also included in the download.
+
+* "http://slidesjs.com/":http://slidesjs.com/
+* "Images with captions":http://slidesjs.com/examples/images-with-captions/
+* "Linking":http://slidesjs.com/examples/linking/
+* "Product":http://slidesjs.com/examples/product/
+* "Multiple slideshows":http://slidesjs.com/examples/multiple/
+* "Simple (unstyled)":http://slidesjs.com/examples/simple/
+* "Standard":http://slidesjs.com/examples/standard/
+
+h2. Todo
+
+Here's a list of soon to be added features. If you have a feature request let me know by either submitting an <a href="http://github.com/nathansearles/slides/issues">issue</a> or <a href="mailto:nsearles at gmail.com">by email</a>.
+
+* New: Play/pause button
+* New: Tutorial on how to create a custom slideshow using Slides
+* Fix: Bug when slideshow only has one slide
+
+h2. Changelog
+* 1.1.8
+** Fixed: bug with preloading image and starting at slide other then the first
+
+* 1.1.7
+** Added currentClass default, thanks arronmabrey!
+
+* 1.1.6
+** Fixed: bug with slidesLoaded function
+
+* 1.1.5
+** New: option called slidesLoaded, a function that is called when Slides is fully loaded
+
+* 1.1.4
+** Fixed: Minor bug with loading image not being removed
+** Added: animationStart() now gets passed the current slide number
+** Updated: Examples now use jQuery 1.5.1
+
+* 1.1.3
+** New: Support for jQuery's easing plugin
+*** Added: fadeEasing and slideEasing defaults
+** Cleaned up JavaScript using http://jshint.com
+** Fixed: Minor bug with hoverPause
+
+* 1.1.2
+** Changed: Width and Height is set in the CSS rather then the JavaScript
+** New: Added some helpful comments to example CSS
+** Fixed: Flash of slide content in IE
+** Updated: Better loading structure
+
+* 1.1.1
+** New: Width and height is now a required attribute
+*** This fixes numerous issues with blank slides and height
+** New: Rewrote image loading
+*** Now supports multiple parent elements
+*** Fixed other minor bugs
+** Fixed: Images should no longer flicker in IE
+
+* 1.1.0
+** Fixed: Issue with images and captions example in IE6/7
+
+* 1.0.9
+** Fixed: Using fade effect, crossfade and autoheight now works properly
+
+* 1.0.8
+** Fixed: IE6/7 JavaScript error related to the pagination
+
+* 1.0.7
+** New: Link to a slide from a slide. Check out /examples/Linking/ in the download
+** New: Deeplinking example added. Check out /examples/Linking/ in the download
+** Changed: Pagination no longer uses rel attribute, it now just uses href with hash
+
+* 1.0.6
+** Changed: Pagination now targets the rel attribute versus using :eq()
+
+* 1.0.5
+** New: Current slide number passed to animationComplete()
+
+* 1.0.4
+** Fixed: start option bug
+** New: error correction for start option
+
+* 1.0.3
+** Fixed: bugs related to auto height
+** New: animationStart() and animationComplete() added
+
+* 1.0.2
+** Fixed: bug with static pagination
+
+* 1.0.1
+** New: boolean to auto generated Next/Prev buttons
+** Width attribute is no longer set for main element
+** Fixed: pagination bug, it was set to false, should be true by default
+
+* 1.0
+** Initial release
\ No newline at end of file
diff --git a/slides/examples/Carousel/index.html b/slides/examples/Carousel/index.html
new file mode 100644
index 0000000..9803e59
--- /dev/null
+++ b/slides/examples/Carousel/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>Slides, A Slideshow Plugin for jQuery</title>
+
+ <style type="text/css" media="screen">
+ /*
+ Load CSS before JavaScript
+ */
+
+ /*
+ Slides container
+ Important:
+ Set the width of your slides container
+ Set to display none, prevents content flash
+ */
+ .slides_container {
+ width:470px;
+ display:none;
+ }
+
+ /*
+ Each slide
+ Important:
+ Set the width of your slides
+ If height not specified height will be set by the slide content
+ Set to display block
+ */
+ .slides_container div.slide {
+ width:470px;
+ height:170px;
+ display:block;
+ }
+
+ /*
+ Set the size of your carousel items
+ */
+ .item {
+ float:left;
+ width:135px;
+ height:135px;
+ margin:0 10px;
+ background:#efefef;
+ }
+
+ /*
+ Optional:
+ Reset list default style
+ */
+ .pagination {
+ list-style:none;
+ margin:0;
+ padding:0;
+ }
+
+ /*
+ Optional:
+ Show the current slide in the pagination
+ */
+ .pagination .current a {
+ color:red;
+ }
+ </style>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+ <script src="js/slides.min.jquery.js"></script>
+
+ <script>
+ $(function(){
+ $('#slides').slides({
+ preload: true,
+ generateNextPrev: true
+ });
+ });
+ </script>
+</head>
+<body>
+ <div id="slides">
+ <div class="slides_container">
+
+ <div class="slide">
+ <div class="item">
+ Item One
+ </div>
+ <div class="item">
+ Item Two
+ </div>
+ <div class="item">
+ Item Three
+ </div>
+ </div>
+
+ <div class="slide">
+ <div class="item">
+ Item Four
+ </div>
+ <div class="item">
+ Item Five
+ </div>
+ <div class="item">
+ Item Six
+ </div>
+ </div>
+
+ <div class="slide">
+ <div class="item">
+ Item Seven
+ </div>
+ <div class="item">
+ Item Eight
+ </div>
+ </div>
+
+ </div>
+ </div>
+</body>
+</html>
diff --git a/slides/examples/Linking/css/global.css b/slides/examples/Linking/css/global.css
new file mode 100644
index 0000000..d67cba5
--- /dev/null
+++ b/slides/examples/Linking/css/global.css
@@ -0,0 +1,185 @@
+/*
+ Resets defualt browser settings
+ reset.css
+*/
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
+:focus { outline:0; }
+a:active { outline:none; }
+body { line-height:1; color:black; background:white; }
+ol,ul { list-style:none; }
+table { border-collapse:separate; border-spacing:0; }
+caption,th,td { text-align:left; font-weight:normal; }
+blockquote:before,blockquote:after,q:before,q:after { content:""; }
+blockquote,q { quotes:"" ""; }
+
+/*
+ Page Style
+*/
+body {
+ font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
+ letter-spacing:0;
+ color:#434343;
+ background:#efefef url(../img/background.png) repeat top center;
+ padding:20px 0;
+ position:relative;
+ text-shadow:0 1px 0 rgba(255,255,255,.8);
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+#container {
+ width:580px;
+ padding:10px;
+ margin:0 auto;
+ position:relative;
+ z-index:0;
+}
+
+#frame {
+ position:absolute;
+ z-index:0;
+ width:739px;
+ height:341px;
+ top:-3px;
+ left:-80px;
+}
+
+#example {
+ width:600px;
+ height:350px;
+ position:relative;
+}
+
+/*
+ Slideshow style
+*/
+
+#slides {
+ position:absolute;
+ top:15px;
+ left:4px;
+ z-index:100;
+}
+
+/*
+ Slides container
+ Important:
+ Set the width of your slides container
+ If height not specified height will be set by the slide content
+ Set to display none, prevents content flash
+*/
+
+.slides_container {
+ width:570px;
+ height:270px;
+ overflow:hidden;
+ position:relative;
+ display:none;
+}
+
+/*
+ Each slide
+ Important:
+ Set the width of your slides
+ Offeset for the 20px of padding
+ If height not specified height will be set by the slide content
+ Set to display block
+*/
+
+#slides .slide {
+ padding:20px;
+ width:530px;
+ height:230px;
+ display:block;
+}
+
+/*
+ Next/prev buttons
+*/
+#slides .next,#slides .prev {
+ position:absolute;
+ top:107px;
+ left:-39px;
+ width:24px;
+ height:43px;
+ display:block;
+ z-index:101;
+}
+
+#slides .next {
+ left:585px;
+}
+
+/*
+ Pagination
+*/
+
+.pagination {
+ margin:26px auto 0;
+ width:100px;
+}
+
+.pagination li {
+ float:left;
+ margin:0 1px;
+ list-style:none;
+}
+
+.pagination li a {
+ display:block;
+ width:12px;
+ height:0;
+ padding-top:12px;
+ background-image:url(../img/pagination.png);
+ background-position:0 0;
+ float:left;
+ overflow:hidden;
+}
+
+.pagination li.current a {
+ background-position:0 -12px;
+}
+
+/*
+ Footer
+*/
+
+#footer {
+ text-align:center;
+ width:580px;
+ margin-top:9px;
+ padding:4.5px 0 18px;
+ border-top:1px solid #dfdfdf;
+}
+
+#footer p {
+ margin:4.5px 0;
+ font-size:1.0em;
+}
+
+/*
+ Type and anchors
+*/
+
+a:link,a:visited {
+ color:#599100;
+ text-decoration:none;
+}
+
+a:hover,a:active {
+ color:#599100;
+ text-decoration:underline;
+}
+
+h1 {
+ font-size:2em;
+}
+
+p {
+ font-size:1.3em;
+}
+
+#slides .link {
+ display:block;
+ margin-top:10px;
+ font-weight:800;
+}
\ No newline at end of file
diff --git a/slides/examples/Linking/img/arrow-next.png b/slides/examples/Linking/img/arrow-next.png
new file mode 100644
index 0000000..1a4f72c
Binary files /dev/null and b/slides/examples/Linking/img/arrow-next.png differ
diff --git a/slides/examples/Linking/img/arrow-prev.png b/slides/examples/Linking/img/arrow-prev.png
new file mode 100644
index 0000000..8211eba
Binary files /dev/null and b/slides/examples/Linking/img/arrow-prev.png differ
diff --git a/slides/examples/Linking/img/background.png b/slides/examples/Linking/img/background.png
new file mode 100644
index 0000000..ef85aca
Binary files /dev/null and b/slides/examples/Linking/img/background.png differ
diff --git a/slides/examples/Linking/img/example-frame.png b/slides/examples/Linking/img/example-frame.png
new file mode 100644
index 0000000..31f2fe1
Binary files /dev/null and b/slides/examples/Linking/img/example-frame.png differ
diff --git a/slides/examples/Linking/img/loading.gif b/slides/examples/Linking/img/loading.gif
new file mode 100644
index 0000000..cccb0fc
Binary files /dev/null and b/slides/examples/Linking/img/loading.gif differ
diff --git a/slides/examples/Linking/img/new-ribbon.png b/slides/examples/Linking/img/new-ribbon.png
new file mode 100644
index 0000000..ef85f5c
Binary files /dev/null and b/slides/examples/Linking/img/new-ribbon.png differ
diff --git a/slides/examples/Linking/img/pagination.png b/slides/examples/Linking/img/pagination.png
new file mode 100644
index 0000000..4dc4610
Binary files /dev/null and b/slides/examples/Linking/img/pagination.png differ
diff --git a/slides/examples/Linking/img/slide-1.jpg b/slides/examples/Linking/img/slide-1.jpg
new file mode 100644
index 0000000..410ce74
Binary files /dev/null and b/slides/examples/Linking/img/slide-1.jpg differ
diff --git a/slides/examples/Linking/img/slide-2.jpg b/slides/examples/Linking/img/slide-2.jpg
new file mode 100644
index 0000000..5a8bf35
Binary files /dev/null and b/slides/examples/Linking/img/slide-2.jpg differ
diff --git a/slides/examples/Linking/img/slide-3.jpg b/slides/examples/Linking/img/slide-3.jpg
new file mode 100644
index 0000000..533604d
Binary files /dev/null and b/slides/examples/Linking/img/slide-3.jpg differ
diff --git a/slides/examples/Linking/img/slide-4.jpg b/slides/examples/Linking/img/slide-4.jpg
new file mode 100644
index 0000000..8e5daeb
Binary files /dev/null and b/slides/examples/Linking/img/slide-4.jpg differ
diff --git a/slides/examples/Linking/img/slide-5.jpg b/slides/examples/Linking/img/slide-5.jpg
new file mode 100644
index 0000000..5e87501
Binary files /dev/null and b/slides/examples/Linking/img/slide-5.jpg differ
diff --git a/slides/examples/Linking/img/slide-6.jpg b/slides/examples/Linking/img/slide-6.jpg
new file mode 100644
index 0000000..5a3d04f
Binary files /dev/null and b/slides/examples/Linking/img/slide-6.jpg differ
diff --git a/slides/examples/Linking/img/slide-7.jpg b/slides/examples/Linking/img/slide-7.jpg
new file mode 100644
index 0000000..29c3156
Binary files /dev/null and b/slides/examples/Linking/img/slide-7.jpg differ
diff --git a/slides/examples/Linking/img/slide.jpg b/slides/examples/Linking/img/slide.jpg
new file mode 100644
index 0000000..7a747a7
Binary files /dev/null and b/slides/examples/Linking/img/slide.jpg differ
diff --git a/slides/examples/Linking/index.html b/slides/examples/Linking/index.html
new file mode 100644
index 0000000..bb77688
--- /dev/null
+++ b/slides/examples/Linking/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>Slides, A Slideshow Plugin for jQuery</title>
+
+ <link rel="stylesheet" href="css/global.css">
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+ <script src="js/slides.min.jquery.js"></script>
+ <script>
+ $(function(){
+ // Set starting slide to 1
+ var startSlide = 1;
+ // Get slide number if it exists
+ if (window.location.hash) {
+ startSlide = window.location.hash.replace('#','');
+ }
+ // Initialize Slides
+ $('#slides').slides({
+ preload: true,
+ preloadImage: 'img/loading.gif',
+ generatePagination: true,
+ play: 5000,
+ pause: 2500,
+ hoverPause: true,
+ // Get the starting slide
+ start: startSlide,
+ animationComplete: function(current){
+ // Set the slide number as a hash
+ window.location.hash = '#' + current;
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+ <div id="container">
+ <div id="example">
+ <div id="slides">
+ <div class="slides_container">
+ <div class="slide">
+ <h1>First Slide</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+ <p><a href="#4" class="link">Check out the fourth slide ›</a></p>
+ </div>
+ <div class="slide">
+ <h1>Second Slide</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+ <p><a href="#5" class="link">Check out the fifth slide ›</a></p>
+ </div>
+ <div class="slide">
+ <h1>Third Slide</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+ <p><a href="#1" class="link">Check out the first slide ›</a></p>
+ </div>
+ <div class="slide">
+ <h1>Fourth Slide</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+ <p><a href="#6" class="link">Check out the sixth slide ›</a></p>
+ </div>
+ <div class="slide">
+ <h1>Fifth Slide</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+ <p><a href="#7" class="link">Check out the seventh slide ›</a></p>
+ </div>
+ <div class="slide">
+ <h1>Sixth Slide</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+ <p><a href="#1" class="link">Check out the first slide ›</a></p>
+ </div>
+ <div class="slide">
+ <h1>Seventh Slide</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+ <p><a href="#3" class="link">Check out the third slide ›</a></p>
+ </div>
+ </div>
+ <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
+ <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
+ </div>
+ <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
+ </div>
+ <div id="footer">
+ <p>For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>
+ <p>Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/" target="_blank">Premium Pixels</a></p>
+ <p>© 2010 <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache license</a>.</p>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/slides/examples/Product/css/global.css b/slides/examples/Product/css/global.css
new file mode 100644
index 0000000..f7c172e
--- /dev/null
+++ b/slides/examples/Product/css/global.css
@@ -0,0 +1,171 @@
+/*
+ Resets defualt browser settings
+ reset.css
+*/
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
+:focus { outline:0; }
+a:active { outline:none; }
+body { line-height:1; color:black; background:white; }
+ol,ul { list-style:none; }
+table { border-collapse:separate; border-spacing:0; }
+caption,th,td { text-align:left; font-weight:normal; }
+blockquote:before,blockquote:after,q:before,q:after { content:""; }
+blockquote,q { quotes:"" ""; }
+
+/*
+ Page style
+*/
+body {
+ font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
+ letter-spacing:0;
+ color:#434343;
+ background:#efefef url(../img/background.png) repeat top center;
+ padding:20px 0;
+ position:relative;
+ text-shadow:0 1px 0 rgba(255,255,255,.8);
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+#container {
+ width:580px;
+ padding:10px;
+ margin:0 auto;
+ position:relative;
+ z-index:0;
+}
+
+#products_example {
+ width:600px;
+ height:282px;
+ position:relative;
+}
+
+/*
+ Slideshow
+*/
+
+#products {
+ margin-left:26px;
+}
+
+/*
+ Slides container
+ Important:
+ Set the width of your slides container
+ Set to display none, prevents content flash
+*/
+
+#products .slides_container {
+ width:366px;
+ overflow:hidden;
+ float:left;
+ position:relative;
+ border:1px solid #dfdfdf;
+ display:none;
+}
+
+/*
+ Each slide
+ Important:
+ Set the width of your slides
+ If height not specified height will be set by the slide content
+ Set to display block
+*/
+
+.slides_container a {
+ width:366px;
+ height:274px;
+ display:block;
+}
+
+/*
+ Next/prev buttons
+*/
+
+#products .next,#products .prev {
+ position:absolute;
+ top:127px;
+ left:0;
+ width:21px;
+ height:0;
+ padding-top:21px;
+ overflow:hidden;
+ display:block;
+ z-index:101;
+}
+
+#products .prev {
+ background:url(../img/arrow-prev.png);
+}
+
+#products .next {
+ left:398px;
+ background:url(../img/arrow-next.png);
+}
+
+/*
+ Pagination
+*/
+
+#products .pagination {
+ background:#dfdfdf;
+ width:130px;
+ padding:5px 5px;
+ float:left;
+ margin-left:30px;
+ border-radius:5px;
+ -webkit-border-radius:5px;
+ -moz-border-radius:5px;
+}
+
+#products .pagination li {
+ float:left;
+ margin:2px 4px;
+ list-style:none;
+}
+
+#products .pagination li a {
+ display:block;
+ width:55px;
+ height:41px;
+ margin:1px;
+ float:left;
+ background:#f9f9f9;
+}
+
+#products .pagination li.current a {
+ border:1px solid #7f7f7f;
+ margin:0;
+}
+
+/*
+ Footer
+*/
+
+#footer {
+ clear:both;
+ text-align:center;
+ width:580px;
+ margin-top:9px;
+ padding:4.5px 0 18px;
+ border-top:1px solid #dfdfdf;
+}
+
+#footer p {
+ margin:4.5px 0;
+ font-size:1.0em;
+}
+
+/*
+ Anchors
+*/
+
+a:link,a:visited {
+ color:#599100;
+ text-decoration:none;
+}
+
+a:hover,a:active {
+ color:#599100;
+ text-decoration:underline;
+}
\ No newline at end of file
diff --git a/slides/examples/Product/img/1144953-1-2x.jpg b/slides/examples/Product/img/1144953-1-2x.jpg
new file mode 100644
index 0000000..5dbcdf1
Binary files /dev/null and b/slides/examples/Product/img/1144953-1-2x.jpg differ
diff --git a/slides/examples/Product/img/1144953-2-2x.jpg b/slides/examples/Product/img/1144953-2-2x.jpg
new file mode 100644
index 0000000..a409d39
Binary files /dev/null and b/slides/examples/Product/img/1144953-2-2x.jpg differ
diff --git a/slides/examples/Product/img/1144953-3-2x.jpg b/slides/examples/Product/img/1144953-3-2x.jpg
new file mode 100644
index 0000000..46ac62d
Binary files /dev/null and b/slides/examples/Product/img/1144953-3-2x.jpg differ
diff --git a/slides/examples/Product/img/1144953-4-2x.jpg b/slides/examples/Product/img/1144953-4-2x.jpg
new file mode 100644
index 0000000..f9598c5
Binary files /dev/null and b/slides/examples/Product/img/1144953-4-2x.jpg differ
diff --git a/slides/examples/Product/img/1144953-5-2x.jpg b/slides/examples/Product/img/1144953-5-2x.jpg
new file mode 100644
index 0000000..0bea943
Binary files /dev/null and b/slides/examples/Product/img/1144953-5-2x.jpg differ
diff --git a/slides/examples/Product/img/1144953-6-2x.jpg b/slides/examples/Product/img/1144953-6-2x.jpg
new file mode 100644
index 0000000..1255733
Binary files /dev/null and b/slides/examples/Product/img/1144953-6-2x.jpg differ
diff --git a/slides/examples/Product/img/1144953-p-2x.jpg b/slides/examples/Product/img/1144953-p-2x.jpg
new file mode 100644
index 0000000..235daf0
Binary files /dev/null and b/slides/examples/Product/img/1144953-p-2x.jpg differ
diff --git a/slides/examples/Product/img/arrow-next.png b/slides/examples/Product/img/arrow-next.png
new file mode 100644
index 0000000..dcc4634
Binary files /dev/null and b/slides/examples/Product/img/arrow-next.png differ
diff --git a/slides/examples/Product/img/arrow-prev.png b/slides/examples/Product/img/arrow-prev.png
new file mode 100644
index 0000000..56f1d13
Binary files /dev/null and b/slides/examples/Product/img/arrow-prev.png differ
diff --git a/slides/examples/Product/index.html b/slides/examples/Product/index.html
new file mode 100644
index 0000000..a0cb1ac
--- /dev/null
+++ b/slides/examples/Product/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>Slides, A Slideshow Plugin for jQuery</title>
+
+ <link rel="stylesheet" href="css/global.css">
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+ <script src="js/slides.min.jquery.js"></script>
+ <script>
+ $(function(){
+ $('#products').slides({
+ preload: true,
+ preloadImage: 'img/loading.gif',
+ effect: 'slide, fade',
+ crossfade: true,
+ slideSpeed: 350,
+ fadeSpeed: 500,
+ generateNextPrev: true,
+ generatePagination: false
+ });
+ });
+ </script>
+</head>
+<body>
+ <div id="container">
+ <div id="products_example">
+ <div id="products">
+ <div class="slides_container">
+ <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-3-2x.jpg" width="366" alt="1144953 3 2x"></a>
+ <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-1-2x.jpg" width="366" alt="1144953 1 2x"></a>
+ <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-2-2x.jpg" width="366" alt="1144953 2 2x"></a>
+ <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-4-2x.jpg" width="366" alt="1144953 4 2x"></a>
+ <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-5-2x.jpg" width="366" alt="1144953 5 2x"></a>
+ <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-6-2x.jpg" width="366" alt="1144953 6 2x"></a>
+ <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-p-2x.jpg" width="366" alt="1144953 P 2x"></a>
+ </div>
+ <ul class="pagination">
+ <li><a href="#"><img src="img/1144953-3-2x.jpg" width="55" alt="1144953 3 2x"></a></li>
+ <li><a href="#"><img src="img/1144953-1-2x.jpg" width="55" alt="1144953 1 2x"></a></li>
+ <li><a href="#"><img src="img/1144953-2-2x.jpg" width="55" alt="1144953 2 2x"></a></li>
+ <li><a href="#"><img src="img/1144953-4-2x.jpg" width="55" alt="1144953 4 2x"></a></li>
+ <li><a href="#"><img src="img/1144953-5-2x.jpg" width="55" alt="1144953 5 2x"></a></li>
+ <li><a href="#"><img src="img/1144953-6-2x.jpg" width="55" alt="1144953 6 2x"></a></li>
+ <li><a href="#"><img src="img/1144953-p-2x.jpg" width="55" alt="1144953 P 2x"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div id="footer">
+ <p>For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>
+ <p>© 2010 <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache license</a>.</p>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/slides/examples/Simple/index.html b/slides/examples/Simple/index.html
new file mode 100644
index 0000000..e3a7b00
--- /dev/null
+++ b/slides/examples/Simple/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>Slides, A Slideshow Plugin for jQuery</title>
+
+ <style type="text/css" media="screen">
+ /*
+ Load CSS before JavaScript
+ */
+
+ /*
+ Slides container
+ Important:
+ Set the width of your slides container
+ Set to display none, prevents content flash
+ */
+ .slides_container {
+ width:470px;
+ display:none;
+ }
+
+ /*
+ Each slide
+ Important:
+ Set the width of your slides
+ If height not specified height will be set by the slide content
+ Set to display block
+ */
+ .slides_container div {
+ width:470px;
+ height:170px;
+ display:block;
+ }
+
+ /*
+ Optional:
+ Reset list default style
+ */
+ .pagination {
+ list-style:none;
+ margin:0;
+ padding:0;
+ }
+
+ /*
+ Optional:
+ Show the current slide in the pagination
+ */
+ .pagination .current a {
+ color:red;
+ }
+ </style>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+ <script src="js/slides.min.jquery.js"></script>
+
+ <script>
+ $(function(){
+ $('#slides').slides({
+ preload: true,
+ generateNextPrev: true
+ });
+ });
+ </script>
+</head>
+<body>
+ <div id="slides">
+ <div class="slides_container">
+ <div>
+ <h1>Slide 1</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 2</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 3</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 4</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/slides/examples/Standard/css/global.css b/slides/examples/Standard/css/global.css
new file mode 100644
index 0000000..f77b688
--- /dev/null
+++ b/slides/examples/Standard/css/global.css
@@ -0,0 +1,180 @@
+/*
+ Resets defualt browser settings
+ reset.css
+*/
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
+:focus { outline:0; }
+a:active { outline:none; }
+body { line-height:1; color:black; background:white; }
+ol,ul { list-style:none; }
+table { border-collapse:separate; border-spacing:0; }
+caption,th,td { text-align:left; font-weight:normal; }
+blockquote:before,blockquote:after,q:before,q:after { content:""; }
+blockquote,q { quotes:"" ""; }
+
+/*
+ Page style
+*/
+
+body {
+ font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
+ letter-spacing:0;
+ color:#434343;
+ background:#efefef url(../img/background.png) repeat top center;
+ padding:20px 0;
+ position:relative;
+ text-shadow:0 1px 0 rgba(255,255,255,.8);
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+#container {
+ width:580px;
+ padding:10px;
+ margin:0 auto;
+ position:relative;
+ z-index:0;
+}
+
+#example {
+ width:600px;
+ height:350px;
+ position:relative;
+}
+
+#ribbon {
+ position:absolute;
+ top:-3px;
+ left:-15px;
+ z-index:500;
+}
+
+#frame {
+ position:absolute;
+ z-index:0;
+ width:739px;
+ height:341px;
+ top:-3px;
+ left:-80px;
+}
+
+/*
+ Slideshow
+*/
+
+#slides {
+ position:absolute;
+ top:15px;
+ left:4px;
+ z-index:100;
+}
+
+/*
+ Slides container
+ Important:
+ Set the width of your slides container
+ Set to display none, prevents content flash
+*/
+
+.slides_container {
+ width:570px;
+ overflow:hidden;
+ position:relative;
+ display:none;
+}
+
+/*
+ Each slide
+ Important:
+ Set the width of your slides
+ If height not specified height will be set by the slide content
+ Set to display block
+*/
+
+.slides_container a {
+ width:570px;
+ height:270px;
+ display:block;
+}
+
+.slides_container a img {
+ display:block;
+}
+
+/*
+ Next/prev buttons
+*/
+
+#slides .next,#slides .prev {
+ position:absolute;
+ top:107px;
+ left:-39px;
+ width:24px;
+ height:43px;
+ display:block;
+ z-index:101;
+}
+
+#slides .next {
+ left:585px;
+}
+
+/*
+ Pagination
+*/
+
+.pagination {
+ margin:26px auto 0;
+ width:100px;
+}
+
+.pagination li {
+ float:left;
+ margin:0 1px;
+ list-style:none;
+}
+
+.pagination li a {
+ display:block;
+ width:12px;
+ height:0;
+ padding-top:12px;
+ background-image:url(../img/pagination.png);
+ background-position:0 0;
+ float:left;
+ overflow:hidden;
+}
+
+.pagination li.current a {
+ background-position:0 -12px;
+}
+
+/*
+ Footer
+*/
+
+#footer {
+ text-align:center;
+ width:580px;
+ margin-top:9px;
+ padding:4.5px 0 18px;
+ border-top:1px solid #dfdfdf;
+}
+
+#footer p {
+ margin:4.5px 0;
+ font-size:1.0em;
+}
+
+/*
+ Anchors
+*/
+
+a:link,a:visited {
+ color:#599100;
+ text-decoration:none;
+}
+
+a:hover,a:active {
+ color:#599100;
+ text-decoration:underline;
+}
\ No newline at end of file
diff --git a/slides/examples/Standard/index.html b/slides/examples/Standard/index.html
new file mode 100644
index 0000000..69c24d9
--- /dev/null
+++ b/slides/examples/Standard/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>Slides, A Slideshow Plugin for jQuery</title>
+
+ <link rel="stylesheet" href="css/global.css">
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+ <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
+ <script src="js/slides.min.jquery.js"></script>
+ <script>
+ $(function(){
+ $('#slides').slides({
+ preload: true,
+ preloadImage: 'img/loading.gif',
+ play: 5000,
+ pause: 2500,
+ hoverPause: true
+ });
+ });
+ </script>
+</head>
+<body>
+ <div id="container">
+ <div id="example">
+ <img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
+ <div id="slides">
+ <div class="slides_container">
+ <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
+ <a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
+ <a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
+ <a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
+ <a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
+ <a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
+ <a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
+ </div>
+ <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
+ <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
+ </div>
+ <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
+ </div>
+ <div id="footer">
+ <p>For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>
+ <p>Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/" target="_blank">Premium Pixels</a></p>
+ <p>© 2010 <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache license</a>.</p>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/slides/examples/images-with-captions/css/global.css b/slides/examples/images-with-captions/css/global.css
new file mode 100644
index 0000000..3aee8fe
--- /dev/null
+++ b/slides/examples/images-with-captions/css/global.css
@@ -0,0 +1,197 @@
+/*
+ Resets defualt browser settings
+ reset.css
+*/
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
+:focus { outline:0; }
+a:active { outline:none; }
+body { line-height:1; color:black; background:white; }
+ol,ul { list-style:none; }
+table { border-collapse:separate; border-spacing:0; }
+caption,th,td { text-align:left; font-weight:normal; }
+blockquote:before,blockquote:after,q:before,q:after { content:""; }
+blockquote,q { quotes:"" ""; }
+
+/*
+ Page style
+*/
+body {
+ font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
+ letter-spacing:0;
+ color:#434343;
+ background:#efefef url(../img/background.png) repeat top center;
+ padding:20px 0;
+ position:relative;
+ text-shadow:0 1px 0 rgba(255,255,255,.8);
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+#container {
+ width:580px;
+ padding:10px;
+ margin:0 auto;
+ position:relative;
+ z-index:0;
+}
+
+#example {
+ width:600px;
+ height:350px;
+ position:relative;
+}
+
+#ribbon {
+ position:absolute;
+ top:-3px;
+ left:-15px;
+ z-index:500;
+}
+
+#frame {
+ position:absolute;
+ z-index:0;
+ width:739px;
+ height:341px;
+ top:-3px;
+ left:-80px;
+}
+
+/*
+ Slideshow
+*/
+
+#slides {
+ position:absolute;
+ top:15px;
+ left:4px;
+ z-index:100;
+}
+
+/*
+ Slides container
+ Important:
+ Set the width of your slides container
+ Set to display none, prevents content flash
+*/
+
+.slides_container {
+ width:570px;
+ overflow:hidden;
+ position:relative;
+ display:none;
+}
+
+/*
+ Each slide
+ Important:
+ Set the width of your slides
+ If height not specified height will be set by the slide content
+ Set to display block
+*/
+
+.slides_container div.slide {
+ width:570px;
+ height:270px;
+ display:block;
+}
+
+
+/*
+ Next/prev buttons
+*/
+
+#slides .next,#slides .prev {
+ position:absolute;
+ top:107px;
+ left:-39px;
+ width:24px;
+ height:43px;
+ display:block;
+ z-index:101;
+}
+
+#slides .next {
+ left:585px;
+}
+
+/*
+ Pagination
+*/
+
+.pagination {
+ margin:26px auto 0;
+ width:100px;
+}
+
+.pagination li {
+ float:left;
+ margin:0 1px;
+ list-style:none;
+}
+
+.pagination li a {
+ display:block;
+ width:12px;
+ height:0;
+ padding-top:12px;
+ background-image:url(../img/pagination.png);
+ background-position:0 0;
+ float:left;
+ overflow:hidden;
+}
+
+.pagination li.current a {
+ background-position:0 -12px;
+}
+
+/*
+ Caption
+*/
+
+.caption {
+ z-index:500;
+ position:absolute;
+ bottom:-35px;
+ left:0;
+ height:30px;
+ padding:5px 20px 0 20px;
+ background:#000;
+ background:rgba(0,0,0,.5);
+ width:540px;
+ font-size:1.3em;
+ line-height:1.33;
+ color:#fff;
+ border-top:1px solid #000;
+ text-shadow:none;
+}
+
+/*
+ Footer
+*/
+
+#footer {
+ text-align:center;
+ width:580px;
+ margin-top:9px;
+ padding:4.5px 0 18px;
+ border-top:1px solid #dfdfdf;
+}
+
+#footer p {
+ margin:4.5px 0;
+ font-size:1.0em;
+}
+
+/*
+ Anchors
+*/
+
+a:link,a:visited {
+ color:#599100;
+ text-decoration:none;
+}
+
+a:hover,a:active {
+ color:#599100;
+ text-decoration:underline;
+}
\ No newline at end of file
diff --git a/slides/examples/images-with-captions/index.html b/slides/examples/images-with-captions/index.html
new file mode 100644
index 0000000..447f8dc
--- /dev/null
+++ b/slides/examples/images-with-captions/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>Slides, A Slideshow Plugin for jQuery</title>
+
+ <link rel="stylesheet" href="css/global.css">
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+ <script src="js/slides.min.jquery.js"></script>
+ <script>
+ $(function(){
+ $('#slides').slides({
+ preload: true,
+ preloadImage: 'img/loading.gif',
+ play: 5000,
+ pause: 2500,
+ hoverPause: true,
+ animationStart: function(current){
+ $('.caption').animate({
+ bottom:-35
+ },100);
+ if (window.console && console.log) {
+ // example return of current slide number
+ console.log('animationStart on slide: ', current);
+ };
+ },
+ animationComplete: function(current){
+ $('.caption').animate({
+ bottom:0
+ },200);
+ if (window.console && console.log) {
+ // example return of current slide number
+ console.log('animationComplete on slide: ', current);
+ };
+ },
+ slidesLoaded: function() {
+ $('.caption').animate({
+ bottom:0
+ },200);
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+ <div id="container">
+ <div id="example">
+ <img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
+ <div id="slides">
+ <div class="slides_container">
+ <div class="slide">
+ <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
+ <div class="caption" style="bottom:0">
+ <p>Happy Bokeh Thursday!</p>
+ </div>
+ </div>
+ <div class="slide">
+ <a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
+ <div class="caption">
+ <p>Taxi</p>
+ </div>
+ </div>
+ <div class="slide">
+ <a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
+ <div class="caption">
+ <p>Happy Bokeh raining Day</p>
+ </div>
+ </div>
+ <div class="slide">
+ <a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
+ <div class="caption">
+ <p>We Eat Light</p>
+ </div>
+ </div>
+ <div class="slide">
+ <a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
+ <div class="caption">
+ <p>“I must go down to the sea again, to the lonely sea and the sky...”</p>
+ </div>
+ </div>
+ <div class="slide">
+ <a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
+ <div class="caption">
+ <p>twelve.inch</p>
+ </div>
+ </div>
+ <div class="slide">
+ <a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
+ <div class="caption">
+ <p>Save my love for loneliness</p>
+ </div>
+ </div>
+ </div>
+ <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
+ <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
+ </div>
+ <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
+ </div>
+ <div id="footer">
+ <p>For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>
+ <p>Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/" target="_blank">Premium Pixels</a></p>
+ <p>© 2010 <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache license</a>.</p>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/slides/examples/multiple/index.html b/slides/examples/multiple/index.html
new file mode 100644
index 0000000..a5ae43c
--- /dev/null
+++ b/slides/examples/multiple/index.html
@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>Slides, A Slideshow Plugin for jQuery</title>
+
+ <style type="text/css" media="screen">
+ /*
+ Load CSS before JavaScript
+ */
+
+ /*
+ Slides container
+ Important:
+ Set the width of your slides container
+ Set to display none, prevents content flash
+ */
+ #slides .slides_container {
+ width:570px;
+ height:170px;
+ display:none;
+ }
+
+ /*
+ Each slide
+ Important:
+ Set the width of your slides
+ If height not specified height will be set by the slide content
+ Set to display block
+ */
+
+ #slides .slides_container div {
+ width:570px;
+ height:170px;
+ display:block;
+ }
+
+ /*
+ Slides container
+ Important:
+ Set the width of your slides container
+ Set to display none, prevents content flash
+ */
+ #slides_two .slides_container {
+ width:250px;
+ display:none;
+ }
+
+ /*
+ Each slide
+ Important:
+ Set the width of your slides
+ If height not specified height will be set by the slide content
+ Set to display block
+ */
+
+ #slides_two .slides_container div {
+ width:250px;
+ height:250px;
+ display:block;
+ }
+
+ /*
+ Slides container
+ Important:
+ Set the width of your slides container
+ Set to display none, prevents content flash
+ */
+ #slides_three .slides_container {
+ width:200px;
+ display:none;
+ }
+
+ /*
+ Each slide
+ Important:
+ Set the width of your slides
+ If height not specified height will be set by the slide content
+ Set to display block
+ */
+
+ #slides_three .slides_container div {
+ width:200px;
+ height:100px;
+ display:block;
+ }
+
+ /*
+ Example only
+ */
+ .pagination .current a {
+ color:red;
+ }
+ hr {
+ background:#efefef;
+ }
+ </style>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+ <script src="js/slides.min.jquery.js"></script>
+
+ <script>
+ $(function(){
+ $('#slides').slides({
+ generateNextPrev: true,
+ play: 2500
+ });
+ $('#slides_two').slides({
+ generateNextPrev: true,
+ play: 4500
+ });
+ $('#slides_three').slides({
+ generateNextPrev: true,
+ play: 6500,
+ autoHeight: true
+ });
+
+ /*
+ You could also combin them all
+ But you can't customize each this way
+
+ $('#slides,#slides_two,#slides_three').slides({
+ preload: true,
+ generateNextPrev: true
+ });
+ */
+
+ /*
+ Or use a class for all three
+ If all three had class="slides"
+ Same here can't customize each this way
+
+ $('.slides').slides({
+ preload: true,
+ generateNextPrev: true
+ });
+ */
+ });
+ </script>
+</head>
+<body>
+ <div id="slides">
+ <div class="slides_container">
+ <div>
+ <h1>Slide 1</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 2</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 3</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 4</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div id="slides_two">
+ <div class="slides_container">
+ <div>
+ <h1>Slide 1</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 2</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 3</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 4</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div id="slides_three">
+ <div class="slides_container">
+ <div>
+ <h1>Slide 1</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 2</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 3</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div>
+ <h1>Slide 4</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/slides/source/slides.jquery.js b/slides/source/slides.jquery.js
new file mode 100644
index 0000000..f2e09c8
--- /dev/null
+++ b/slides/source/slides.jquery.js
@@ -0,0 +1,555 @@
+/*
+* Slides, A Slideshow Plugin for jQuery
+* Intructions: http://slidesjs.com
+* By: Nathan Searles, http://nathansearles.com
+* Version: 1.1.9
+* Updated: September 5th, 2011
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+(function($){
+ $.fn.slides = function( option ) {
+ // override defaults with specified option
+ option = $.extend( {}, $.fn.slides.option, option );
+
+ return this.each(function(){
+ // wrap slides in control container, make sure slides are block level
+ $('.' + option.container, $(this)).children().wrapAll('<div class="slides_control"/>');
+
+ var elem = $(this),
+ control = $('.slides_control',elem),
+ total = control.children().size(),
+ width = control.children().outerWidth(),
+ height = control.children().outerHeight(),
+ start = option.start - 1,
+ effect = option.effect.indexOf(',') < 0 ? option.effect : option.effect.replace(' ', '').split(',')[0],
+ paginationEffect = option.effect.indexOf(',') < 0 ? effect : option.effect.replace(' ', '').split(',')[1],
+ next = 0, prev = 0, number = 0, current = 0, loaded, active, clicked, position, direction, imageParent, pauseTimeout, playInterval;
+
+ // is there only one slide?
+ if (total < 2) {
+ // Fade in .slides_container
+ $('.' + option.container, $(this)).fadeIn(option.fadeSpeed, option.fadeEasing, function(){
+ // let the script know everything is loaded
+ loaded = true;
+ // call the loaded funciton
+ option.slidesLoaded();
+ });
+ // Hide the next/previous buttons
+ $('.' + option.next + ', .' + option.prev).fadeOut(0);
+ return false;
+ }
+
+ // animate slides
+ function animate(direction, effect, clicked) {
+ if (!active && loaded) {
+ active = true;
+ // start of animation
+ option.animationStart(current + 1);
+ switch(direction) {
+ case 'next':
+ // change current slide to previous
+ prev = current;
+ // get next from current + 1
+ next = current + 1;
+ // if last slide, set next to first slide
+ next = total === next ? 0 : next;
+ // set position of next slide to right of previous
+ position = width*2;
+ // distance to slide based on width of slides
+ direction = -width*2;
+ // store new current slide
+ current = next;
+ break;
+ case 'prev':
+ // change current slide to previous
+ prev = current;
+ // get next from current - 1
+ next = current - 1;
+ // if first slide, set next to last slide
+ next = next === -1 ? total-1 : next;
+ // set position of next slide to left of previous
+ position = 0;
+ // distance to slide based on width of slides
+ direction = 0;
+ // store new current slide
+ current = next;
+ break;
+ case 'pagination':
+ // get next from pagination item clicked, convert to number
+ next = parseInt(clicked,10);
+ // get previous from pagination item with class of current
+ prev = $('.' + option.paginationClass + ' li.'+ option.currentClass +' a', elem).attr('href').match('[^#/]+$');
+ // if next is greater then previous set position of next slide to right of previous
+ if (next > prev) {
+ position = width*2;
+ direction = -width*2;
+ } else {
+ // if next is less then previous set position of next slide to left of previous
+ position = 0;
+ direction = 0;
+ }
+ // store new current slide
+ current = next;
+ break;
+ }
+
+ // fade animation
+ if (effect === 'fade') {
+ // fade animation with crossfade
+ if (option.crossfade) {
+ // put hidden next above current
+ control.children(':eq('+ next +')', elem).css({
+ zIndex: 10
+ // fade in next
+ }).fadeIn(option.fadeSpeed, option.fadeEasing, function(){
+ if (option.autoHeight) {
+ // animate container to height of next
+ control.animate({
+ height: control.children(':eq('+ next +')', elem).outerHeight()
+ }, option.autoHeightSpeed, function(){
+ // hide previous
+ control.children(':eq('+ prev +')', elem).css({
+ display: 'none',
+ zIndex: 0
+ });
+ // reset z index
+ control.children(':eq('+ next +')', elem).css({
+ zIndex: 0
+ });
+ // end of animation
+ option.animationComplete(next + 1);
+ active = false;
+ });
+ } else {
+ // hide previous
+ control.children(':eq('+ prev +')', elem).css({
+ display: 'none',
+ zIndex: 0
+ });
+ // reset zindex
+ control.children(':eq('+ next +')', elem).css({
+ zIndex: 0
+ });
+ // end of animation
+ option.animationComplete(next + 1);
+ active = false;
+ }
+ });
+ } else {
+ // fade animation with no crossfade
+ control.children(':eq('+ prev +')', elem).fadeOut(option.fadeSpeed, option.fadeEasing, function(){
+ // animate to new height
+ if (option.autoHeight) {
+ control.animate({
+ // animate container to height of next
+ height: control.children(':eq('+ next +')', elem).outerHeight()
+ }, option.autoHeightSpeed,
+ // fade in next slide
+ function(){
+ control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing);
+ });
+ } else {
+ // if fixed height
+ control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing, function(){
+ // fix font rendering in ie, lame
+ if($.browser.msie) {
+ $(this).get(0).style.removeAttribute('filter');
+ }
+ });
+ }
+ // end of animation
+ option.animationComplete(next + 1);
+ active = false;
+ });
+ }
+ // slide animation
+ } else {
+ // move next slide to right of previous
+ control.children(':eq('+ next +')').css({
+ left: position,
+ display: 'block'
+ });
+ // animate to new height
+ if (option.autoHeight) {
+ control.animate({
+ left: direction,
+ height: control.children(':eq('+ next +')').outerHeight()
+ },option.slideSpeed, option.slideEasing, function(){
+ control.css({
+ left: -width
+ });
+ control.children(':eq('+ next +')').css({
+ left: width,
+ zIndex: 5
+ });
+ // reset previous slide
+ control.children(':eq('+ prev +')').css({
+ left: width,
+ display: 'none',
+ zIndex: 0
+ });
+ // end of animation
+ option.animationComplete(next + 1);
+ active = false;
+ });
+ // if fixed height
+ } else {
+ // animate control
+ control.animate({
+ left: direction
+ },option.slideSpeed, option.slideEasing, function(){
+ // after animation reset control position
+ control.css({
+ left: -width
+ });
+ // reset and show next
+ control.children(':eq('+ next +')').css({
+ left: width,
+ zIndex: 5
+ });
+ // reset previous slide
+ control.children(':eq('+ prev +')').css({
+ left: width,
+ display: 'none',
+ zIndex: 0
+ });
+ // end of animation
+ option.animationComplete(next + 1);
+ active = false;
+ });
+ }
+ }
+ // set current state for pagination
+ if (option.pagination) {
+ // remove current class from all
+ $('.'+ option.paginationClass +' li.' + option.currentClass, elem).removeClass(option.currentClass);
+ // add current class to next
+ $('.' + option.paginationClass + ' li:eq('+ next +')', elem).addClass(option.currentClass);
+ }
+ }
+ } // end animate function
+
+ function stop() {
+ // clear interval from stored id
+ clearInterval(elem.data('interval'));
+ }
+
+ function pause() {
+ if (option.pause) {
+ // clear timeout and interval
+ clearTimeout(elem.data('pause'));
+ clearInterval(elem.data('interval'));
+ // pause slide show for option.pause amount
+ pauseTimeout = setTimeout(function() {
+ // clear pause timeout
+ clearTimeout(elem.data('pause'));
+ // start play interval after pause
+ playInterval = setInterval( function(){
+ animate("next", effect);
+ },option.play);
+ // store play interval
+ elem.data('interval',playInterval);
+ },option.pause);
+ // store pause interval
+ elem.data('pause',pauseTimeout);
+ } else {
+ // if no pause, just stop
+ stop();
+ }
+ }
+
+ // 2 or more slides required
+ if (total < 2) {
+ return;
+ }
+
+ // error corection for start slide
+ if (start < 0) {
+ start = 0;
+ }
+
+ if (start > total) {
+ start = total - 1;
+ }
+
+ // change current based on start option number
+ if (option.start) {
+ current = start;
+ }
+
+ // randomizes slide order
+ if (option.randomize) {
+ control.randomize();
+ }
+
+ // make sure overflow is hidden, width is set
+ $('.' + option.container, elem).css({
+ overflow: 'hidden',
+ // fix for ie
+ position: 'relative'
+ });
+
+ // set css for slides
+ control.children().css({
+ position: 'absolute',
+ top: 0,
+ left: control.children().outerWidth(),
+ zIndex: 0,
+ display: 'none'
+ });
+
+ // set css for control div
+ control.css({
+ position: 'relative',
+ // size of control 3 x slide width
+ width: (width * 3),
+ // set height to slide height
+ height: height,
+ // center control to slide
+ left: -width
+ });
+
+ // show slides
+ $('.' + option.container, elem).css({
+ display: 'block'
+ });
+
+ // if autoHeight true, get and set height of first slide
+ if (option.autoHeight) {
+ control.children().css({
+ height: 'auto'
+ });
+ control.animate({
+ height: control.children(':eq('+ start +')').outerHeight()
+ },option.autoHeightSpeed);
+ }
+
+ // checks if image is loaded
+ if (option.preload && control.find('img:eq(' + start + ')').length) {
+ // adds preload image
+ $('.' + option.container, elem).css({
+ background: 'url(' + option.preloadImage + ') no-repeat 50% 50%'
+ });
+
+ // gets image src, with cache buster
+ var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime();
+
+ // check if the image has a parent
+ if ($('img', elem).parent().attr('class') != 'slides_control') {
+ // If image has parent, get tag name
+ imageParent = control.children(':eq(0)')[0].tagName.toLowerCase();
+ } else {
+ // Image doesn't have parent, use image tag name
+ imageParent = control.find('img:eq(' + start + ')');
+ }
+
+ // checks if image is loaded
+ control.find('img:eq(' + start + ')').attr('src', img).load(function() {
+ // once image is fully loaded, fade in
+ control.find(imageParent + ':eq(' + start + ')').fadeIn(option.fadeSpeed, option.fadeEasing, function(){
+ $(this).css({
+ zIndex: 5
+ });
+ // removes preload image
+ $('.' + option.container, elem).css({
+ background: ''
+ });
+ // let the script know everything is loaded
+ loaded = true;
+ // call the loaded funciton
+ option.slidesLoaded();
+ });
+ });
+ } else {
+ // if no preloader fade in start slide
+ control.children(':eq(' + start + ')').fadeIn(option.fadeSpeed, option.fadeEasing, function(){
+ // let the script know everything is loaded
+ loaded = true;
+ // call the loaded funciton
+ option.slidesLoaded();
+ });
+ }
+
+ // click slide for next
+ if (option.bigTarget) {
+ // set cursor to pointer
+ control.children().css({
+ cursor: 'pointer'
+ });
+ // click handler
+ control.children().click(function(){
+ // animate to next on slide click
+ animate('next', effect);
+ return false;
+ });
+ }
+
+ // pause on mouseover
+ if (option.hoverPause && option.play) {
+ control.bind('mouseover',function(){
+ // on mouse over stop
+ stop();
+ });
+ control.bind('mouseleave',function(){
+ // on mouse leave start pause timeout
+ pause();
+ });
+ }
+
+ // generate next/prev buttons
+ if (option.generateNextPrev) {
+ $('.' + option.container, elem).after('<a href="#" class="'+ option.prev +'">Prev</a>');
+ $('.' + option.prev, elem).after('<a href="#" class="'+ option.next +'">Next</a>');
+ }
+
+ // next button
+ $('.' + option.next ,elem).click(function(e){
+ e.preventDefault();
+ if (option.play) {
+ pause();
+ }
+ animate('next', effect);
+ });
+
+ // previous button
+ $('.' + option.prev, elem).click(function(e){
+ e.preventDefault();
+ if (option.play) {
+ pause();
+ }
+ animate('prev', effect);
+ });
+
+ // generate pagination
+ if (option.generatePagination) {
+ // create unordered list
+ if (option.prependPagination) {
+ elem.prepend('<ul class='+ option.paginationClass +'></ul>');
+ } else {
+ elem.append('<ul class='+ option.paginationClass +'></ul>');
+ }
+ // for each slide create a list item and link
+ control.children().each(function(){
+ $('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (number+1) +'</a></li>');
+ number++;
+ });
+ } else {
+ // if pagination exists, add href w/ value of item number to links
+ $('.' + option.paginationClass + ' li a', elem).each(function(){
+ $(this).attr('href', '#' + number);
+ number++;
+ });
+ }
+
+ // add current class to start slide pagination
+ $('.' + option.paginationClass + ' li:eq('+ start +')', elem).addClass(option.currentClass);
+
+ // click handling
+ $('.' + option.paginationClass + ' li a', elem ).click(function(){
+ // pause slideshow
+ if (option.play) {
+ pause();
+ }
+ // get clicked, pass to animate function
+ clicked = $(this).attr('href').match('[^#/]+$');
+ // if current slide equals clicked, don't do anything
+ if (current != clicked) {
+ animate('pagination', paginationEffect, clicked);
+ }
+ return false;
+ });
+
+ // click handling
+ $('a.link', elem).click(function(){
+ // pause slideshow
+ if (option.play) {
+ pause();
+ }
+ // get clicked, pass to animate function
+ clicked = $(this).attr('href').match('[^#/]+$') - 1;
+ // if current slide equals clicked, don't do anything
+ if (current != clicked) {
+ animate('pagination', paginationEffect, clicked);
+ }
+ return false;
+ });
+
+ if (option.play) {
+ // set interval
+ playInterval = setInterval(function() {
+ animate('next', effect);
+ }, option.play);
+ // store interval id
+ elem.data('interval',playInterval);
+ }
+ });
+ };
+
+ // default options
+ $.fn.slides.option = {
+ preload: false, // boolean, Set true to preload images in an image based slideshow
+ preloadImage: '/img/loading.gif', // string, Name and location of loading image for preloader. Default is "/img/loading.gif"
+ container: 'slides_container', // string, Class name for slides container. Default is "slides_container"
+ generateNextPrev: false, // boolean, Auto generate next/prev buttons
+ next: 'next', // string, Class name for next button
+ prev: 'prev', // string, Class name for previous button
+ pagination: true, // boolean, If you're not using pagination you can set to false, but don't have to
+ generatePagination: true, // boolean, Auto generate pagination
+ prependPagination: false, // boolean, prepend pagination
+ paginationClass: 'pagination', // string, Class name for pagination
+ currentClass: 'current', // string, Class name for current class
+ fadeSpeed: 350, // number, Set the speed of the fading animation in milliseconds
+ fadeEasing: '', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/
+ slideSpeed: 350, // number, Set the speed of the sliding animation in milliseconds
+ slideEasing: '', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/
+ start: 1, // number, Set the speed of the sliding animation in milliseconds
+ effect: 'slide', // string, '[next/prev], [pagination]', e.g. 'slide, fade' or simply 'fade' for both
+ crossfade: false, // boolean, Crossfade images in a image based slideshow
+ randomize: false, // boolean, Set to true to randomize slides
+ play: 0, // number, Autoplay slideshow, a positive number will set to true and be the time between slide animation in milliseconds
+ pause: 0, // number, Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in milliseconds
+ hoverPause: false, // boolean, Set to true and hovering over slideshow will pause it
+ autoHeight: false, // boolean, Set to true to auto adjust height
+ autoHeightSpeed: 350, // number, Set auto height animation time in milliseconds
+ bigTarget: false, // boolean, Set to true and the whole slide will link to next slide on click
+ animationStart: function(){}, // Function called at the start of animation
+ animationComplete: function(){}, // Function called at the completion of animation
+ slidesLoaded: function() {} // Function is called when slides is fully loaded
+ };
+
+ // Randomize slide order on load
+ $.fn.randomize = function(callback) {
+ function randomizeOrder() { return(Math.round(Math.random())-0.5); }
+ return($(this).each(function() {
+ var $this = $(this);
+ var $children = $this.children();
+ var childCount = $children.length;
+ if (childCount > 1) {
+ $children.hide();
+ var indices = [];
+ for (i=0;i<childCount;i++) { indices[indices.length] = i; }
+ indices = indices.sort(randomizeOrder);
+ $.each(indices,function(j,k) {
+ var $child = $children.eq(k);
+ var $clone = $child.clone(true);
+ $clone.show().appendTo($this);
+ if (callback !== undefined) {
+ callback($child, $clone);
+ }
+ $child.remove();
+ });
+ }
+ }));
+ };
+})(jQuery);
\ No newline at end of file
--
Collection of jQuery plugins
More information about the Pkg-javascript-commits
mailing list