Adding new callback demo

demo/demo.css

@@ -130,3 +130,70 @@ a {
     font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
   }
+
+/* Callback example */
+
+h3 {
+  font: 20px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #fff;
+  }
+
+.events {
+  list-style: none;
+  }
+
+.callbacks_container {
+  margin-bottom: 50px;
+  position: relative;
+  float: left;
+  width: 100%;
+  }
+
+.callbacks {
+  position: relative;
+  list-style: none;
+  overflow: hidden;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  }
+
+.callbacks li {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  }
+
+.callbacks img {
+  display: block;
+  height: auto;
+  width: 100%;
+  border: 0;
+  }
+
+.callbacks_nav {
+  position: absolute;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  top: 56%;
+  left: 0;
+  opacity: 0.7;
+  text-indent: -9999px;
+  overflow: hidden;
+  text-decoration: none;
+  height: 61px;
+  width: 38px;
+  background: transparent url("themes/themes.gif") no-repeat left top;
+  margin-top: -45px;
+  }
+
+.callbacks_nav:active {
+  opacity: 1.0;
+  }
+
+.callbacks_nav.next {
+  left: auto;
+  background-position: right top;
+  right: 0;
+  }

demo/demo.html

@@ -18,12 +18,30 @@
 
       // Slideshow 2
       $("#slides2").responsiveSlides({
-        auto: true,
+        auto: false,
         pagination: true,
         fade: 300,
         maxwidth: 540
       });
 
+      // Slideshow 3
+      $("#slides3").responsiveSlides({
+        auto: false,
+        pagination: false,
+        nav: true,
+        fade: 400,
+        namespace: "callbacks"
+      }).bind({
+        // Before callback
+        "callbacks-before": function () {
+          $('.events').append("<li>before event fired.</li>");
+        },
+        // After callback
+        "callbacks-after": function () {
+          $('.events').append("<li>after event fired.</li>");
+        }
+      });
+
     });
   </script>
 </head>
@@ -46,6 +64,18 @@
       <li><a href="#"><img src="3.jpg" alt="" /></a></li>
     </ul>
 
+    <!-- Slideshow 2 -->
+    <div class="callbacks_container">
+      <ul id="slides3">
+        <li><img src="1.jpg" alt="" /></li>
+        <li><img src="2.jpg" alt="" /></li>
+        <li><img src="3.jpg" alt="" /></li>
+      </ul>
+    </div>
+    <ul class="events">
+      <li><h3>Example 3 callback events</h3></li>
+    </ul>
+
     <a href="http://responsive-slides.viljamis.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>
   </div>