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

仔细观察之后，我认为你正在走向复杂的道路。也许创建一个简单的幻灯片将对此进行排序（没有彩盒）：

http://jsfiddle.net/7vb4M/

代码解释：

$(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();
        }

    });
});

Wordpress：Colorbox幻灯片显示无法正常工作

1 个答案: