Flexslider carousel / Fancybox 图像消失答案

【问题标题】：Flexslider carousel / Fancybox images disappearingFlexslider carousel / Fancybox 图像消失
【发布时间】：2013-10-23 22:49:14
【问题描述】：

我有一个 flexslider 轮播设置，每个图像周围都有一个链接，可以使用以下代码在 fancybox 中启动：

<div class="flexslider">
   <ul class="slides">
      <?php foreach( $images as $image ): ?>
         <li>
            <a class="fancybox" href="<?php echo $image['sizes']['large']; ?>" rel="gallery">
               <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
            </a>
         </li>
      <?php endforeach; ?>
   </ul>
</div>

<script type="text/javascript">
   $(window).load(function() {
      $('.flexslider').flexslider({
         animation: "slide",
         animationLoop: true,
         itemWidth: 135,
         itemMargin: 0,
         minItems: 5,
         maxItems: 5,
         directionNav: true,
         controlNav: false,
         slideshow: false
      });
   });
   $("a.fancybox").fancybox({
      helpers : {
         overlay : {
            locked : false
         }
      }
   });
</script>

灯箱正确加载并且轮播功能正常，但是在 Firefox 中关闭灯箱时，所有列表项（或图像）都会隐藏，直到再次单击。据我所知，它在 Chrome 中运行良好。有什么想法吗？

【问题讨论】：

为什么不尝试将两个初始化都包含在 $(window).load() 或 $(document).ready() 中？
@JFK 感谢您的回复，但遗憾的是没有奏效。值得一提的是，如果我将轮播移动一步或在 firebug 中进行任何 css 调整，所有图像都会重新出现。
那么你必须有其他一些影响fancybox的设置在你上面的代码中没有反映。过去已经解决了类似的情况（stackoverflow.com/a/14247879/1055987），所以我不认为存在冲突，而是本地化问题。你能分享这个问题的链接或jsfiddle吗？

标签： jquery css fancybox flexslider

【解决方案1】：

通过添加以下内容进行修复：

.flexslider .slides li {
    backface-visibility:hidden;
}

【讨论】：