Wordpress: Colorbox slide show not working

Question

I am trying to create a slideshow using colorbox but its not working properly as all I see is the images being listed one after another on the page. I am using the following html:

   <ul id="gallery">
     <li>
       <a href="<?php echo get_template_directory_uri();?> /images/photos/pearl1.jpg" rel="slideshow" title="Image 1">
         <img src="<?php echo get_template_directory_uri();?> /images/photos/pearl1.jpg" alt="" />
       </a>
     </li>
     <li>
       <a href="<?php echo get_template_directory_uri();?> /images/photos/pearl1.jpg" rel="slideshow" title="Image 2">
         <img src="<?php echo get_template_directory_uri();?> /images/photos/pearl2.jpg" alt="" />
       </a>
     </li>
     <li>
       <a href="<?php echo get_template_directory_uri();?> /images/photos/pearl1.jpg" rel="slideshow" title="Image 3">
         <img src="<?php echo get_template_directory_uri();?> /images/photos/pearl3.jpg" alt="" />
       </a>
     </li>
     <li>
       <a href="<?php echo get_template_directory_uri();?> /images/photos/pearl1.jpg" rel="slideshow" title="Image 4">
         <img src="<?php echo get_template_directory_uri();?> /images/photos/pearl4.jpg" alt="" />
       </a>
     </li>

   </ul>

CSS for the same is shown here:

body.page-id-7 #gallery {
 width: 100%;
 height: 100%;
 margin: 0 auto;
 padding: 0;
 overflow: hidden;
 position: relative;
 list-style: none;
}

body.page-id-7 #gallery li {
 width: 100%;
 height: 100%;
}

body.page-id-7 #gallery li a {
 width: 100%;
 height: 100%;
 display: block;
}

body.page-id-7 #gallery li a img {
 display: block;
 width: 100%;
 height: 100%;
}

and js code is like this:

jQuery(document).ready(function() {

  $('ul.gallery').colorbox({iframe:true, 
  width:100%, 
  height:100%,
  onComplete: function(){slideshow: true,rel:'slideshow',slideshowAuto:true, slideshowSpeed:2000}});

});

I checked that the css and the js files are getting loaded as other functions from the same files are working fine.

Answer 1

After watching this closely, I think you are making it way to complicated. Maybe creating a simple slideshow will sort this out (without colorbox):

http://jsfiddle.net/7vb4M/

Code explainations:

$(document).ready(function() {
    $("#gallery").find("li").hide(); // hide all images
    $("#gallery").find("li:first").show(); // show first image

    $("#gallery li").click(function() { // when user click on an image we switch to next image
        if ($(this).next().length != 0) // If we are not at the last image of the slideshow
            $(this).next().show().prev().hide(); // we show the next image and hide the current one
        else {
            $("#gallery").find("li:first").show(); // in the case we are at the last image, we hide the last one and show the first one
            $("#gallery").find("li:last").hide();
        }

    });
});