單擊Flexslider幻燈片打開Fancybox創建衝突

Question

我正在使用Fancybox和Flexslider結合使用。 Flexslider自動播放，當我點擊幻燈片時，它會打開Fancybox，唯一的問題是在Fancybox內，它繼續播放幻燈片（通過Flexslider）...然後圖像開始消失並重新出現 - 基本上它開始衝突。

當Fancybox關閉時，如何在打開Fancybox並停止播放時如何停止Flexslider幻燈片？

<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>