Added 'captions' to the last example.

demo/demo.css

@@ -125,12 +125,6 @@ a {
   font-size: 11px;
   }
 
-@media screen and (max-width: 600px) {
-  h1 {
-    font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-  }
-
 /* Callback example */
 
 h3 {
@@ -168,17 +162,38 @@ h3 {
 
 .callbacks img {
   display: block;
+  position: relative;
+  z-index: 1;
   height: auto;
   width: 100%;
   border: 0;
   }
 
+.callbacks .caption {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  font-size: 20px;
+  text-shadow: none;
+  background: red;
+  color: #fff;
+  background: #000;
+  background: rgba(0,0,0, .8);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 20px;
+  margin: 0;
+  max-width: none;
+  }
+
 .callbacks_nav {
   position: absolute;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
-  top: 56%;
+  top: 52%;
   left: 0;
   opacity: 0.7;
+  z-index: 3;
   text-indent: -9999px;
   overflow: hidden;
   text-decoration: none;
@@ -197,3 +212,12 @@ h3 {
   background-position: right top;
   right: 0;
   }
+
+@media screen and (max-width: 600px) {
+  h1 {
+    font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+  .callbacks_nav {
+    top: 47%;
+    }
+  }

demo/demo.html

@@ -13,7 +13,8 @@
 
       // Slideshow 1
       $("#slides1").responsiveSlides({
-        maxwidth: 800
+        maxwidth: 800,
+        fade: 800,
       });
 
       // Slideshow 2
@@ -29,7 +30,7 @@
         auto: false,
         pagination: false,
         nav: true,
-        fade: 400,
+        fade: 500,
         namespace: "callbacks"
       }).bind({
         // Before callback
@@ -67,11 +68,22 @@
     <!-- 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>
+        <li>
+          <img src="1.jpg" alt="" />
+          <p class="caption">This is a caption</p>
+        </li>
+        <li>
+          <img src="2.jpg" alt="" />
+          <p class="caption">This is another caption</p>
+        </li>
+        <li>
+          <img src="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>
     </ul>