Question

我正在使用Fancybox和Flexslider。 Flexslider自动播放，当我点击幻灯片它确实打开Fancybox时，唯一的问题是在Fancybox中，它继续播放幻灯片（通过Flexslider）......然后图像开始消失并重新出现 - 基本上它开始发生冲突

如何在打开Fancybox时停止Flexslider幻灯片放映并在Fancybox关闭时播放？

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
    $('.flexslider').flexslider({
        animationLoop: true,
        pauseOnHover: false,
        controlNav: false,
        directionNav: false,
        slideshowSpeed: 4000,
    });
});
jQuery(function($) { 
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
});
</script>

这是html / php：

<div id="imgHolder" class="flexslider">
  <ul class="slides" style="margin:0px!important;padding:0px;">
    <li class="fancybox" rel="group" style="list-style-type:none!important;">
      <img src="<?php echo the_field('product_image_row'); ?>" alt="<?php echo the_title(); ?>" width="318" height="294">
    </li>
    <?php $counter=1 ; while(the_repeater_field( 'thumbnail_images_row')): ?>
    <li class="fancybox" rel="group" style="list-style-type:none!important;">
      <img src="<?php echo the_sub_field('image_row'); ?>" width="318" height="294" alt="<?php echo the_title(); ?> <?php echo $counter; ?>" />
    </li>
    <?php $counter++; endwhile; ?>
  </ul>
</div>

Answer 1

通过将我的javascript更改为以下内容来解决这个问题：

<script type="text/javascript">
   $(window).load(function() {
      $('.flexslider').flexslider({
         animation: "slide",
         animationLoop: true,
         directionNav: false,
         controlNav: false,
         slideshow: true
      });
   });
   $(".fancybox").fancybox({
      helpers : {
         overlay : {
            locked : false,
            arrows : true,
            nextClick : true
         }
      }
   });
</script>

点击Flexslider幻灯片打开Fancybox创建冲突

1 个答案: