Initial basic working version of the jQuery Sliders plugin.

drewdeponte · Apr 10, 2012 · 97d5141 · 97d5141
commit 97d5141
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 0 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>jQuery Sliders Plugin Example</title>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/jquery.sliders.css">
+    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+    <script language="javascript" type="text/javascript" src="../jquery.sliders.js"></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        $("#slideshow1").sliders();
+        $("#slideshow2").sliders({ interval: 1000 });
+      });
+    </script>
+
+    <style type="text/css">
+      .sliders {
+        height: 300px;
+        width: 300px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>jQuery Sliders Plugin Example</h1>
+
+    <div id="slideshow1" class="sliders">
+      <div style="background-color: red; height: 300px; width: 300px;" class="active-slide slide">hello</div>
+      <div style="background-color: blue; height: 300px; width: 300px;" class="slide">world</div>
+      <div style="background-color: green; height: 300px; width: 300px;" class="slide">again</div>
+    </div>
+
+    <div id="slideshow2" class="sliders">
+      <div style="background-color: orange; height: 300px; width: 300px;" class="active-slide slide">hello</div>
+      <div style="background-color: yellow; height: 300px; width: 300px;" class="slide">world</div>
+      <div style="background-color: teal; height: 300px; width: 300px;" class="slide">again</div>
+    </div>
+
+  </body>
+</html>
diff --git a/jquery.sliders.js b/jquery.sliders.js
@@ -0,0 +1,54 @@
+// This is a jQuery plugin based on a simple jquery slideshow tutorial that I found at
+// the following http://jonraasch.com/blog/a-simple-jquery-slideshow. It was a decent
+// basis to get something working but wasn't the most reusable code base so I turned it
+// into a jQuery plugin called sliders.
+//
+// I built this plugin because I needed a very simple slider that didn't do too much
+// that I could use in an app I was working on. All the other jQuery slideshow plugins
+// I could find tried to help too much, in turn adding too many constraints on how they
+// could be used. Hence, I am specificly trying to keep this plugin vague in the ways
+// it can be used which probably means it won't be the most feature rich slideshow
+// plugin available.
+
+(function($){ // An anonymous function to wrap around your function to avoid conflicts
+  $.fn.extend({ // Attach this new method to jQuery
+    sliders: function(user_options) { // The plugin constructor/initialization method
+
+      var defaults = {
+        interval: 5000, // interval at which slides will change
+        selector: ".slide", // selector used to identify slides
+        active_class: "active-slide", // class used to identify active slides
+        last_active_class: "last-active-slide" // class used to identify the last active slide
+      };
+
+      var options = $.extend(defaults, user_options);
+
+      return this.each(function() { // Iterate over the current set of matched elements
+        var o = options;
+
+        var self = $(this);
+
+        setInterval(function() {
+          var active_slide_selector = o.selector + "." + o.active_class;
+          var last_active_slide_selector = o.selector + "." + o.last_active_class;
+
+          var active = self.find(active_slide_selector);
+          if (active.length === 0) active = self.find(o.selector).last();
+
+          var next = active.next().length ? active.next() : self.find(o.selector).first();
+
+          active.addClass(o.last_active_class);
+
+          next.css({ opacity: 0.0 })
+          .addClass(o.active_class)
+          .animate({ opacity: 1.0 }, 1000, function() {
+            active.removeClass(o.last_active_class);
+            active.removeClass(o.active_class);
+          });
+        }, o.interval);
+
+        return this;
+      });
+    }
+  });
+})(jQuery);
diff --git a/stylesheets/jquery.sliders.css b/stylesheets/jquery.sliders.css
@@ -0,0 +1,18 @@
+.sliders {
+  position: relative;
+}
+
+.sliders .slide {
+  position:absolute;
+  top:0;
+  left:0;
+  z-index:8;
+}
+
+.sliders .slide.active-slide {
+  z-index: 10;
+}
+
+.sliders .slide.last-active-slide {
+  z-index: 9;
+}