Merge remote-tracking branch 'remotes/andyadams/master'

Conflicts:
	responsiveslides.min.js

demo/demo.css

@@ -206,6 +206,19 @@ h3 {
   right: 0;
   }
 
+/* Thumbnail pager example */
+#slider4-pager {
+  max-width: 260px;
+}
+
+#slider4-pager a {
+  padding: 0;
+}
+
+#slider4-pager .rslides_here a {
+  background: transparent;
+}
+
 @media screen and (max-width: 600px) {
   h1 {
     font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;

demo/demo.html

@@ -41,6 +41,11 @@
         }
       });
 
+      // Slideshow 4
+      $("#slider4").responsiveSlides({
+        pager: '#slider4-pager'
+      });
+
     });
   </script>
 </head>
@@ -64,6 +69,19 @@
     </ul>
 
     <!-- Slideshow 3 -->
+    <ul class="rslides" id="slider4">
+      <li><img src="1.jpg" alt="" /></li>
+      <li><img src="2.jpg" alt="" /></li>
+      <li><img src="3.jpg" alt="" /></li>
+    </ul>
+
+    <ul id="slider4-pager">
+      <li><a href="#"><img src="1_thumb.jpg" alt="" /></a></li>
+      <li><a href="#"><img src="2_thumb.jpg" alt="" /></a></li>
+      <li><a href="#"><img src="3_thumb.jpg" alt="" /></a></li>
+    </ul>
+
+    <!-- Slideshow 4 -->
     <div class="callbacks_container">
       <ul class="rslides" id="slider3">
         <li>
@@ -83,7 +101,7 @@
 
     <!-- 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>

responsiveslides.js

@@ -173,7 +173,7 @@
         }
 
         // Pager
-        if (settings.pager) {
+        if (true === settings.pager) {
           var tabMarkup = [];
           $slide.each(function (i) {
             var n = i + 1;
@@ -184,14 +184,25 @@
           });
           $pager.append(tabMarkup);
 
-          $tabs = $pager.find("a");
-
           // Inject pager
           if (options.controls) {
             $(settings.controls).append($pager);
           } else {
             $this.after($pager);
           }
+        } else if(settings.pager) {
+          // If a selector has been given for the pager element
+          $pager = $(settings.pager);
+          $pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
+
+          $pager.find('li').each(function (i) {
+            $(this).addClass( slideClassPrefix + (i + 1) );
+          });
+        }
+
+        // If we have any pager, we need to set up the selectTab function
+        if (settings.pager) {
+          $tabs = $pager.find('a');
 
           // Select pager item
           selectTab = function (idx) {