Wordpress: слайд-шоу Colorbox не работает

Question

Я пытаюсь создать слайд-шоу с помощью colorbox, но он не работает должным образом, поскольку все, что я вижу, это изображения, которые перечисляются один за другим на странице. Я использую следующий 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 для того же показано здесь:

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%; 
} 

и JS код выглядит так:

jQuery(document).ready(function() { 

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

}); 

Я проверил, что CSS и js-файлы загружаются, так как другие функции из одних и тех же файлов работают нормально.

Answer 1

После тщательного наблюдения за этим, я думаю, вы делаете это очень сложно. Возможно создание простой слайд-шоу будет разобраться в этом (без ColorBox):

http://jsfiddle.net/7vb4M/

Код 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(); 
     } 

    }); 
});