Index: css/fancy_slide.css
===================================================================
--- css/fancy_slide.css	(revision 179)
+++ css/fancy_slide.css	(revision 567)
@@ -6,6 +6,7 @@
   margin: 0 auto;
   overflow: hidden;
   position: relative;
+  z-index: 0;
 }
 .fancy-slide ul{
   list-style:none;
@@ -18,7 +19,7 @@
   padding: 0;
 }
 
-#controller{
+.controller {
   background-color: rgb(0, 68, 119); /* Fallback for older browsers */
   background: rgba(0, 68, 119, 0.9);
   bottom: 0;
@@ -27,41 +28,41 @@
   position:absolute;
 }
 
-#controller .controls{
+.controller .controls{
   float:right;
 }
 
-#controller span,
-#controller p{
+.controller span,
+.controller p{
   float:left;
   margin:4px 5px 0 0;
 }
-#controller span{
+.controller span{
   color:#fff;
   font-weight:bold;
 }
-#controller p{
+.controller p{
   color:#fff;
 }
-#controller p.active{
+.controller p.active{
   display:block;
 }
-#controller p.inactive{
+.controller p.inactive{
   display:none;
 }
 
-#controller a{
+.controller a{
   border:1px solid #3399ff;
   float:left;
   margin-right:10px;
 }
-#controller a:last-child{
+.controller a:last-child{
   margin-right:0;
 }
-#controller a.active{
+.controller a.active{
   border-color:#fff;
 }
-#controller img{
+.controller img{
   float:left;
   display:block;
   width:40px;
Index: js/fancy_slide.js
===================================================================
--- js/fancy_slide.js	(revision 179)
+++ js/fancy_slide.js	(revision 567)
@@ -49,15 +49,15 @@
       
       if(options.showControls) {
         if(options.controlsType == 'thumbs') {
-          var html = '<div id="controller">';
+          var html = '<div class="controller">';
           html += '<span>' + options.controlsBefore + '</span>';
           for (i = 0; i < slides; i++){
-            var thistitle = $('li img:eq(' + i + ')');
+            var thistitle = $('li img:eq(' + i + ')', obj);
             html += '<p>' + thistitle.attr('alt') + '</p>';
           }
           html += '<div class="controls">';
           for (i = 0; i < slides; i++){
-            var thisslide = $('li img:eq(' + i + ')');
+            var thisslide = $('li img:eq(' + i + ')', obj);
             html += '<a href="#" title ="' + thisslide.attr('alt') + '">'
             html += '<img src="' + thisslide.attr('src') + '" alt="' + thisslide.attr('alt') + '" />'
             html += '</a>';
@@ -67,31 +67,32 @@
           html += options.controlsAfter;            
           $(obj).append(html);
       
-          $('#controller').css('zIndex', depth + 1);
-          $('#controller').css('width', slidewidth - 20);
+         controller = $('.controller', obj);
+         $(controller).css('zIndex', depth + 1);
+         $(controller).css('width', slidewidth - 20);
           
           // Make sure controller link images are sized correctly
-          $('#controller img').attr('height', '40');     
+          $('img', controller).attr('height', '40');     
   
           // Set classes for controller text and buttons
           showinfo();
   
           // Add sliding animation for controller
           if (options.slideControls) {
-          var controlsheight = $('#controller').outerHeight();
-          $('#controller').css('bottom','-' + controlsheight + 'px');
+          var controlsheight = $(controller).outerHeight();
+          $(controller).css('bottom','-' + controlsheight + 'px');
           obj.hover(
             function() {
-              $('#controller').stop().animate({bottom:'0px'}, 300);
+                $(controller).stop().animate({bottom:'0px'}, 300);
               }, 
               function() {
-                $('#controller').stop().animate({bottom:'-' + controlsheight + 'px'}, 300);
+                $(controller).stop().animate({bottom:'-' + controlsheight + 'px'}, 300);
               }
             );
           }
           
           // Give controller links functionality to change slides
-          $('#controller a').each(function(i) {
+          $('a', controller).each(function(i) {
             $(this).bind('click', function() {
                 previousslide = currentslide;
                 currentslide = i;
@@ -188,7 +189,7 @@
         showinfo();
       };
       var theslide = currentslide;
-      var diff = Math.abs(theslide-currentslide);
+      var diff = (currentslide - theslide + slides) % slides;
       var speed = diff * options.speed;
       
       if (!clicked){
@@ -378,12 +379,15 @@
     
     // Change classes on controller info and button states 
     function showinfo() {
-      $('#controller p, #controller a').addClass('inactive');
-      $('#controller p.active, #controller a.active').removeClass('active');
-      $('#controller p:eq(' + currentslide + ')').removeClass('inactive');
-      $('#controller p:eq(' + currentslide + ')').addClass('active');
-      $('#controller a:eq(' + currentslide + ')').removeClass('inactive');
-      $('#controller a:eq(' + currentslide + ')').addClass('active');
+      controller = $('.controller', obj);
+      $('p', controller).addClass('inactive');
+      $('a', controller).addClass('inactive');
+      $('p.active', controller).removeClass('active');
+      $('a.active', controller).removeClass('active');
+      $('p:eq(' + currentslide + ')', controller).removeClass('inactive');
+      $('p:eq(' + currentslide + ')', controller).addClass('active');
+      $('a:eq(' + currentslide + ')', controller).removeClass('inactive');
+      $('a:eq(' + currentslide + ')', controller).addClass('active');
     };
   };