Random Timeout

README.md

@@ -1,15 +1,15 @@
-# ResponsiveSlides.js v1.3
+# ResponsiveSlides.js v1.55
 ### Simple & lightweight responsive slider plugin (in 1kb)
 
 
+[ResponsiveSlides.js](http://responsiveslides.com/) is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like [Microsoft's Build 2012](http://www.buildwindows.com/launch) and [Gridset App](https://gridsetapp.com). ResponsiveSlides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds CSS max-width support for IE6 and other browsers that don't natively support it. Only dependency is [jQuery](http://jquery.com/) (1.6 and up supported, tested up to 1.8.3) and that all the images are the same size.
 
-[ResponsiveSlides.js](http://responsiveslides.com/) is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds CSS max-width support for IE6 and other browsers that don't natively support it. Only dependency is [jQuery](http://jquery.com/) (1.4 and up supported) and that all the images are same size.
-
-Biggest difference to other responsive slider plugins is the file size (1kb minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.
+Biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.
 
 #### Features:
  * Fully responsive
  * 1kb minified and gzipped
+ * CSS3 transitions with JavaScript fallback
  * Simple markup using unordered list
  * Settings for transition and timeout durations
  * Multiple slideshows supported
@@ -19,6 +19,7 @@ Biggest difference to other responsive slider plugins is the file size (1kb mini
  * Separate pagination and next/prev controls
  * Possibility to choose where the controls append to
  * Possibility to randomize the order of the slides
+ * Possibility to use custom markup for pagination
  * Can be paused while hovering slideshow and/or controls
  * Images can be wrapped inside links
  * Optional 'before' and 'after' callbacks
@@ -28,9 +29,12 @@ Biggest difference to other responsive slider plugins is the file size (1kb mini
 Usage Instructions and demo
 ======
 
-For instructions and demo go to [http://responsiveslides.com/](http://responsiveslides.com/), or [download this repository as a zip file](https://github.com/viljamis/ResponsiveSlides.js/zipball/master) and and open "index.html" from the "example" folder. There's also a file called "themes.html" inside the "themes" folder which has [more examples about the usage](http://viljamis.com/responsive-slides/themes/).
+For instructions and demo go to [http://responsiveslides.com/](http://responsiveslides.com/), or [download this repository as a zip file](https://github.com/arielsalminen/ResponsiveSlides.js/zipball/master) and and open "index.html" from the "example" folder.
+
+* View [additional usage examples online](http://responsiveslides.com/themes/themes.html).
+* View [a demo with captions](http://responsiveslides.com/with-captions/themes.html).
 
-Currently jQuery 1.4 and up is supported.
+Currently jQuery 1.6 and up is supported.
 
 
 
@@ -39,7 +43,7 @@ License
 
 Licensed under the MIT license.
 
-Copyright (c) 2011-2012 Viljami Salminen, http://viljamis.com/
+Copyright (c) 2011-2023 Ariel Salminen, https://arie.ls/
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
@@ -52,6 +56,23 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 Changelog
 ======
 
+
+v1.55 (2016-08-05) - Adds jQuery 3.0 compatibility (thanks to [@Requios](https://github.com/Requios)!).
+
+v1.54 (2013-04-26) - Fixes few bugs with the before and after callbacks.
+
+v1.53 (2013-01-14) - Minor speed optimization (thanks [@bazineta](https://github.com/bazineta)!).
+
+v1.52 (2013-01-07) - Adds option called "manualControls" which allows to write custom markup for pager navigation (thanks to [@andyadams](https://github.com/andyadams)). "controls" option is renamed to "navContainer". Default speed of the transition is now to 500ms. Adds also webkit-backface-visibility: hidden; style for the slides to prevent some HD acceleration issues on mobile WebKit browsers.
+
+v1.51 (2012-12-15) - Fixes a bug where pictures would not display if next button was clicked too quickly 10 times.
+
+v1.5 (2012-12-14) - Adds CSS3 transition support with automatic jQuery fallback.
+
+v1.32 (2012-05-09) - Fixes a bug which caused the slideshow to break in Chrome when changing between active and inactive browser tabs.
+
+v1.31 (2012-05-02) - Easier to use callbacks (+ optional "active" class for the next/prev buttons when animating slides. If you need this functionality, open the unminified version and search for "Adds active class during slide animation" and remove comments around it).
+
 v1.3 (2012-04-26) - Three new options: "random", "pause", "pauseControls" + small bug fixes.
 
 v1.25 (2012-04-19) - No more flashing of unstyled slideshow before JS has loaded. Adds also better support for cases when JavaScript isn't available.
@@ -64,7 +85,7 @@ v1.22 (2012-03-27) - Adds callback events which are similar as in [@Wilto](https
 
 v1.21 (2012-03-23) - Added two new options: 'nextText' and 'prevText'.
 
-v1.20 (2012-03-21) - New option called 'nav', which enables next and previous buttons. Can be used with 'pagination' and 'auto' options. Adds also new [themes folder](http://viljamis.com/responsive-slides/themes/) with three different ways to use the new next and previous buttons.
+v1.20 (2012-03-21) - New option called 'nav', which enables next and previous buttons. Can be used with 'pagination' and 'auto' options. Adds also new [themes folder](http://responsiveslides.com/themes/themes.html) with three different ways to use the new next and previous buttons.
 
 v1.10 (2012-03-12) - Refactoring, New markup style, CSS is now separated from the plugin, you can have links around images and other elements inside slides (not just images, but also captions etc.) + New option called "pagination", which enables to choose both "pagination" and "auto" at the same time. Shout outs for the help to [@bgutschke](https://github.com/bgutschke)
 
@@ -77,3 +98,9 @@ v1.03 (2011-12-12) - Code refactoring, smaller size, better performance
 v1.01 (2011-12-11) - Better usage of styles and the namespace
 
 v1.00 (2011-12-04) - Release
+
+
+Want to do a pull request?
+======
+
+Great! New ideas are more than welcome, but please check the [Pull Request Guidelines](https://github.com/arielsalminen/ResponsiveSlides.js/wiki/Pull-Request-Guidelines) first before doing so.

demo/demo.css

@@ -4,7 +4,7 @@
 }
 
 html {
-  background: #222 url("bg.png") repeat;
+  background: #222 url("images/bg.png") repeat;
 }
 
 body {
@@ -43,7 +43,8 @@ p,h3,h4,pre {
   margin: 0 auto 40px;
   }
 
-.rslides2 {
+#slider2,
+#slider3 {
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
@@ -206,11 +207,28 @@ h3 {
   right: 0;
   }
 
+#slider3-pager a {
+  display: inline-block;
+}
+
+#slider3-pager img {
+  float: left;
+}
+
+#slider3-pager .rslides_here a {
+  background: transparent;
+  box-shadow: 0 0 0 2px #666;
+}
+
+#slider3-pager a {
+  padding: 0;
+}
+
 @media screen and (max-width: 600px) {
   h1 {
     font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
   .callbacks_nav {
     top: 47%;
     }
-  }
+  }

demo/demo.html

@@ -1,44 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8">
   <title>ResponsiveSlides.js &middot; Responsive jQuery slideshow</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <link rel="stylesheet" href="../responsiveslides.css" />
-  <link rel="stylesheet" href="demo.css" />
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" href="../responsiveslides.css">
+  <link rel="stylesheet" href="demo.css">
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
   <script src="../responsiveslides.min.js"></script>
   <script>
+    // You can also use "$(window).load(function() {"
     $(function () {
 
       // Slideshow 1
-      $(".rslides1").responsiveSlides({
+      $("#slider1").responsiveSlides({
         maxwidth: 800,
         speed: 800
       });
 
       // Slideshow 2
-      $(".rslides2").responsiveSlides({
+      $("#slider2").responsiveSlides({
         auto: false,
         pager: true,
         speed: 300,
         maxwidth: 540
       });
 
       // Slideshow 3
-      $(".rslides3").responsiveSlides({
+      $("#slider3").responsiveSlides({
+        manualControls: '#slider3-pager',
+        maxwidth: 540
+      });
+
+      // Slideshow 4
+      $("#slider4").responsiveSlides({
         auto: false,
         pager: false,
         nav: true,
         speed: 500,
-        namespace: "callbacks"
-      }).bind({
-        // Before callback
-        "callbacks-before": function () {
+        namespace: "callbacks",
+        before: function () {
           $('.events').append("<li>before event fired.</li>");
         },
-        // After callback
-        "callbacks-after": function () {
+        after: function () {
           $('.events').append("<li>after event fired.</li>");
         }
       });
@@ -51,45 +55,69 @@
     <h1>ResponsiveSlides.js</h1>
     <h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2>
 
+
+
     <!-- Slideshow 1 -->
-    <ul class="rslides rslides1">
-      <li><img src="1.jpg" alt="" /></li>
-      <li><img src="2.jpg" alt="" /></li>
-      <li><img src="3.jpg" alt="" /></li>
+    <ul class="rslides" id="slider1">
+      <li><img src="images/1.jpg" alt=""></li>
+      <li><img src="images/2.jpg" alt=""></li>
+      <li><img src="images/3.jpg" alt=""></li>
     </ul>
 
+
+
     <!-- Slideshow 2 -->
-    <ul class="rslides rslides2">
-      <li><a href="#"><img src="1.jpg" alt="" /></a></li>
-      <li><a href="#"><img src="2.jpg" alt="" /></a></li>
-      <li><a href="#"><img src="3.jpg" alt="" /></a></li>
+    <ul class="rslides" id="slider2">
+      <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
+      <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
+      <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
     </ul>
 
-    <!-- Slideshow 2 -->
+
+
+    <!-- Slideshow 3 -->
+    <ul class="rslides" id="slider3">
+      <li><img src="images/1.jpg" alt=""></li>
+      <li><img src="images/2.jpg" alt=""></li>
+      <li><img src="images/3.jpg" alt=""></li>
+    </ul>
+
+    <!-- Slideshow 3 Pager -->
+    <ul id="slider3-pager">
+      <li><a href="#"><img src="images/1_thumb.jpg" alt=""></a></li>
+      <li><a href="#"><img src="images/2_thumb.jpg" alt=""></a></li>
+      <li><a href="#"><img src="images/3_thumb.jpg" alt=""></a></li>
+    </ul>
+
+
+
+    <!-- Slideshow 4 -->
     <div class="callbacks_container">
-      <ul class="rslides rslides3">
+      <ul class="rslides" id="slider4">
         <li>
-          <img src="1.jpg" alt="" />
+          <img src="images/1.jpg" alt="">
           <p class="caption">This is a caption</p>
         </li>
         <li>
-          <img src="2.jpg" alt="" />
+          <img src="images/2.jpg" alt="">
           <p class="caption">This is another caption</p>
         </li>
         <li>
-          <img src="3.jpg" alt="" />
+          <img src="images/3.jpg" alt="">
           <p class="caption">The third caption</p>
         </li>
       </ul>
     </div>
 
     <!-- This is here just to demonstrate the callbacks -->
     <ul class="events">
-      <li><h3>Example 3 callback events</h3></li>
+      <li><h3>Example 4 callback events</h3></li>
     </ul>
 
+
+
     <a href="http://responsiveslides.com/" id="download">See the documentation</a>
-    <p class="footer">ResponsiveSlides.js is created by <a href="http://viljamis.com">@viljamis</a>. It's released under the MIT license. If you have any questions or feedback you can use the <a href="https://github.com/viljami/ResponsiveSlides.js">GitHub project page</a>.</p>
+    <p class="footer">ResponsiveSlides.js is created by <a href="https://arie.ls">@ariel</a>. It's released under the MIT license. If you have any questions or feedback you can use the <a href="https://github.com/arielsalminen/ResponsiveSlides.js">GitHub project page</a>.</p>
   </div>
 </body>
 </html>