dongzhun6952 2015-04-28 14:55
浏览 78
已采纳

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

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>
  • 写回答

1条回答 默认 最新

  • duanchu3376 2015-04-29 09:14
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 motoradmin系统的多对多配置
  • ¥15 求组态王串口自定义通信配置方法或代码?
  • ¥15 实验 :UML2.0 结构建模
  • ¥20 用vivado写数字逻辑实验报告撰写,FPGA实验
  • ¥15 为什么shp文件会有这种小方块?
  • ¥15 ecplise在连接数据库时显示加载驱动成功但是数据库连接失败
  • ¥15 visionmaster启动失败,提示为“机器不满足授权而被禁用”
  • ¥15 IDEA中圈复杂度如何具体设置
  • ¥50 labview采集不了数据
  • ¥15 Multisim红外倒车雷达仿真中距离问题