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

Question

I'm using Fancybox and Flexslider in conjunction. Flexslider plays automatically and when I click on the slide it does open Fancybox, the only problem is that within Fancybox, it continues to play the slideshow (via Flexslider)... then the images start to disappear and reappear - essentially it begins to clash.

How can I stop the Flexslider slideshow when opening Fancybox and play it when Fancybox is closed?

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

Here's the 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

Figured this out by changing my javascript to the following:

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