fixed for single slide problem

README.textile

@@ -1,196 +1,18 @@
-h1. SlidesJS version 2.0 beta 1
+h1. SlidesJS is obsolete and no longer maintained
 
-**SlidesJS version 2.0 beta 1 is not meant for production deployment.**
+This repo is kept around for archival purposes. ✌️
 
-For the current production ready version of SlidesJS visit "http://slidesjs.com/":http://slidesjs.com/.
+h2. SlidesJS 3.0
 
-Created by "Nathan Searles":mailto:nsearles@gmail.com, "http://nathansearles.com":http://nathansearles.com
+SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions.
 
 Support forum "http://groups.google.com/group/slidesjs":http://groups.google.com/group/slidesjs
 
-(c) 2011 by Nathan Searles
+(c) 2013 by Nathan Searles
 
-h2. SlidesJS 2 Demos
+h2. Documentation
 
-* "Standard":http://beta.slidesjs.com/examples/standard/
-* "Responsive":http://beta.slidesjs.com/examples/responsive/ (kinda buggy, working on that)
-* "Browser Window":http://beta.slidesjs.com/examples/browser-window/
-
-h3. Soon to be added demos
-* Carousel Style
-** 3 or 4 items per slide, could be album covers or similar
-* Thumbnails
-** Pagination with thumbnails
-* Captions
-** Image slideshow with captions
-* Side Navigation
-** With vertical slideshow
-* Play/pause
-** Image slideshow with play/pause button, pagination, next/prev buttons
-
-h2. SlidesJS 2 documentation
-
-h3. Basic Markup Structure
-
-For just images you can simply use:
-
-<pre><div id="slides">
- <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1">
- <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2">
- <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3">
- <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4">
-</div></pre>
-
-Or you can use &lt;div&gt;s for your slides
-
-<pre><div id="slides">
- <div>
-  <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1">
- </div>
- <div>
-  <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2">
- </div>
- <div>
-  <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3">
- </div>
- <div>
-  <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4">
- </div>
-</div></pre>
-
-Simple as that. No extra &lt;div&gt;s, no navigation or pagination to define, it's all created for you. SlidesJS creates two &lt;div&gt;s for the slideshow, ".slidesContainer" and ".slidesControl", both are required and can not be changed.
-
-Navigation classes are ".slidesPrevious" and ".slidesNext" and are created as anchor tags. These cannot be changed.
-
-Pagination uses an unordered list markup structure. The &lt;ul&gt; has a class of ".slidesPagination". This cannot be changed.
-
-You may define your own navigation or pagination, but they must use the same class names, sorry it saves from including extraneous code.
-
-h3. Basic CSS
-
-No CSS required. Shit yeah!
-
-h3. Initialize SlidesJS
-
-<pre><script>
- $(function(){
-  $("#slides").slides();
- });
-</script></pre>
-
-Tip: With SidesJS 2 you need to define the width and height if it's different from the default (780px x 300px). This resolves many issues having to do with loading and makes SlidesJS 2 self contained, not requiring any CSS.
-
-<pre><script>
- $(function(){
-  $("#slides").slides({
-    width: 640,
-    height: 480
-  });
- });
-</script></pre>
-
-h3. Method Calls - The good stuff
-
-h4. Play
-
-<pre>$("#slides").slides("play");</pre>
-
-h4. Pause
-
-<pre>$("#slides").slides("pause");</pre>
-
-h4. Stop
-
-<pre>$("#slides").slides("stop");</pre>
-
-h4. Next, using default effect
-
-<pre>$("#slides").slides("next");</pre>
-
-h4. Next, define effect, "slide" or "fade"
-
-<pre>$("#slides").slides("next","fade");</pre>
-
-h4. Previous, uses default effect
-
-<pre>$("#slides").slides("previous");</pre>
-
-h4. Previous, define effect, "slide" or "fade"
-
-<pre>$("#slides").slides("previous","fade");</pre>
-
-h4. Goto slide 2 using default effect
-
-<pre>$("#slides").slides("slide",2);</pre>
-
-h4. Goto slide 2 define effect, "slide" or "fade"
-
-<pre>$("#slides").slides("slide",4,"fade");</pre>
-
-h4. Update
-
-<pre>$("#slides").slides("update");</pre>
-
-h4. Destroy
-
-<pre>$("#slides").slides("destroy");</pre>
-
-
-h4. Status
-
-<pre>$("#slides").slides("status");</pre>
-
-Returns JSON object:
-<pre>{
- current: 4,
- state: "playing",
- total: 7
-}</pre>
-
-The follow could also be used
-
-<pre>$("#slides").slides("status","current");</pre>
-
-returns: number
-
-<pre>$("#slides").slides("status","state");</pre>
-
-returns: string, playing, paused, stopped, undefined
-
-<pre>$("#slides").slides("status","total");</pre>
-
-returns: number
-
-h3. Options
-
-<pre>width: 780, // [Number] Define the slide width
-responsive: false, // [Boolean] slideshow will scale to its container
-height: 300, // [Number] Define the slide height
-navigation: true, // [Boolean] Auto generate the naviagation, next/previous buttons
-pagination: true, // [Boolean] Auto generate the pagination
-effects: {
- navigation: "slide",  // [String] Can be either "slide" or "fade"
- pagination: "slide" // [String] Can be either "slide" or "fade"
-},
-direction: "left", // [String] Define the slide direction: "Up", "Right", "Down", "left"
-fade: {
- interval: 1000, // [Number] Interval of fade in milliseconds
- crossfade: false, // [Boolean] TODO: add this feature. Crossfade the slides, great for images, bad for text
- easing: "" // [String] Dependency: jQuery Easing plug-in <http://gsgd.co.uk/sandbox/jquery/easing/>
-},
-slide: {
- interval: 1000, // [Number] Interval of fade in milliseconds
- browserWindow: false, // [Boolean] Slide in/out from browser window, bad ass
- easing: "" // [String] Dependency: jQuery Easing plug-in <http://gsgd.co.uk/sandbox/jquery/easing/>
-},
-preload: {
- active: true, // [Boolean] Preload the slides before showing them, this needs some work
- image: "../img/loading.gif" // [String] Define the path to a load .gif, yes I should do something cooler
-},
-startAtSlide: 1, // [Number] What should the first slide be?
-playInterval: 5000, // [Number] Time spent on each slide in milliseconds
-pauseInterval: 8000, // [Number] Time spent on pause, triggered on any navigation or pagination click
-autoHeight: false // [Boolean] TODO: add this feature. Auto sets height based on each slide</pre>
+SlidesJS version 3.0 documentation is available at "http://slidesjs.com/":http://slidesjs.com/
 
 h2. License
 
@@ -207,81 +29,5 @@ See the License for the specific language governing permissions and
 limitations under the License.
 
 h2. Changelog
-* 2.0 beta 1
-** Complete rewrite using method based pattern
-
-* 1.1.8
-** Fixed: bug with preloading image and starting at a 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
+* 3.0 Initial release

examples/basic-fade/index.html

@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>SlidesJS Basic Code Example</title>
+  <meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
+  <meta name="author" content="Nathan Searles">
+
+  <!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
+  <meta name="viewport" content="width=device-width">
+  <!-- End SlidesJS Required -->
+
+  <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
+  <style>
+    /* Prevent the slideshow from flashing on load */
+    #slides {
+      display: none
+    }
+
+    /* Center the slideshow */
+    .container {
+      margin: 0 auto
+    }
+
+    /* Show active item in the pagination */
+    .slidesjs-pagination .active {
+      color:red;
+    }
+
+    /* Media quires for a responsive layout */
+
+    /* For tablets & smart phones */
+    @media (max-width: 767px) {
+      body {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+      .container {
+        width: auto
+      }
+    }
+
+    /* For smartphones */
+    @media (max-width: 480px) {
+      .container {
+        width: auto
+      }
+    }
+
+    /* For smaller displays like laptops */
+    @media (min-width: 768px) and (max-width: 979px) {
+      .container {
+        width: 724px
+      }
+    }
+
+    /* For larger displays */
+    @media (min-width: 1200px) {
+      .container {
+        width: 1170px
+      }
+    }
+  </style>
+  <!-- SlidesJS Required: -->
+</head>
+<body>
+
+  <!-- SlidesJS Required: Start Slides -->
+  <!-- The container is used to define the width of the slideshow -->
+  <div class="container">
+    <div id="slides">
+      <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
+      <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
+      <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
+      <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
+    </div>
+  </div>
+  <!-- End SlidesJS Required: Start Slides -->
+
+  <!-- SlidesJS Required: Link to jQuery -->
+  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+  <!-- End SlidesJS Required -->
+
+  <!-- SlidesJS Required: Link to jquery.slides.js -->
+  <script src="js/jquery.slides.min.js"></script>
+  <!-- End SlidesJS Required -->
+
+  <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
+  <script>
+    $(function() {
+      $('#slides').slidesjs({
+        width: 940,
+        height: 528,
+        navigation: {
+          effect: "fade"
+        },
+        pagination: {
+          effect: "fade"
+        },
+        effect: {
+          fade: {
+            speed: 400
+          }
+        }
+      });
+    });
+  </script>
+  <!-- End SlidesJS Required -->
+</body>
+</html>