flexslider 和 elevatezoom 的动画错误

Question

正在使用具有缩放效果 (elevatezoom) 的滑块 (flexslider)；滑块使用缩略图作为滑块的导航。问题出在变焦镜头的显示上。

我花了一些时间来缩小问题范围：如果将 flexslider 动画设置为 "slide"，变焦镜头可以正常显示，但如果将动画设置为 "fade"，则它仍然隐藏在图像后面.

我已经尝试了一系列不同的 z-index 测试，甚至更改了活动图像的 elevatezoom 文件中的 z-index 代码，但随后显示了错误的图像。

我找到了一个 codepen 并将其分叉以显示问题 - https://codepen.io/anon/pen/jpdOop

现在#slider 的动画设置为滑动并且变焦镜头可见。但如果动画没有显示或设置为"fade"，变焦镜头就会消失在图像后面。

除了 z-index 之外，还有什么可能导致这种情况吗？关于在哪里查看的任何想法，我很乐意运行将其记下，只是出于对原因的想法。

谢谢

HTML

<div class="container">
  <div class="row">
      <div class="col-md-6">
    <div class="flexslider" id="slider">
       <ul class="slides">
         <li>
            <img class="zoom" src="http://placehold.it/350x200/A93226/ffffff" data-zoom-image="http://placehold.it/1901x600/A93226/ffffff">
         </li>
         <li>
            <img class="zoom" src="http://placehold.it/350x200/2980B9/ffffff" data-zoom-image="http://placehold.it/1902x600/2980B9/ffffff">
         </li>
         <li>
            <img class="zoom" src="http://placehold.it/350x200/17A589/ffffff" data-zoom-image="http://placehold.it/1903x600/17A589/ffffff">
         </li>
         <li>
             <img class="zoom" src="http://placehold.it/350x200/F1C40F/ffffff" data-zoom-image="http://placehold.it/1904x600/F1C40F/ffffff">
        </li>
         <li>
             <img class="zoom" src="http://placehold.it/350x200/6C3483/ffffff" data-zoom-image="http://placehold.it/1904x600/6C3483/ffffff">
        </li>
      </ul>
    </div>
    <div id="carousel" class="flexslider">
      <ul class="slides">
        <li>
          <img src="http://placehold.it/350x150/A93226/ffffff">
        </li>
        <li>
          <img src="http://placehold.it/350x150/2980B9/ffffff">
        </li>
        <li>
          <img src="http://placehold.it/350x150/17A589/ffffff">
        </li>
        <li>
          <img src="http://placehold.it/350x150/F1C40F/ffffff">
        </li>
        <li>
          <img src="http://placehold.it/350x150/6C3483/ffffff">
        </li>
      </ul>
</div>
  </div>
  </div>
</div>

CSS

.flexslider {
  margin-bottom: 0 !important;
}

.slider-for div img {
  width: 350px;
  height: 150px;
}

.slider-nav {
  margin-top: 10px;
}
.slider-nav div img {
  width: 80%;
  height: 50px;
}

.slick-slide {
  outline: 0;
}

.flex-direction-nav a:before {
  font-size: 30px;
}

#slider ul.flex-direction-nav li a {
  display: none !important;
}

JS

$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 135,
    itemMargin: 5,
    asNavFor: '#slider',

  });

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });

$(".zoom").elevateZoom();

Answer 1

好吧，我看了代码，也许我明白了问题所在。首先，elevatezoom 创建一系列 .zoomContainer 来处理您的所有图像，创建镜头及其所有东西。 所有这些容器都没有设置 z-index。

第二件事：Flexslider，当它的动画设置为“slide”时，将每个 li 放在浮动上，没有设置 z-index 因为它是一个简单的幻灯片。

在这种情况下，这两个插件可以很好地协同工作，因为z-index不会造成任何麻烦。

当您将动画设置为“fade”时情况会发生变化，因为这里 Flexslider 将 z-index 放在 li（1，恰好）上以产生淡入淡出效果.自然地，elevatezoom 不知道这一点并继续工作而没有在其元素中放置 z-index，因此我们的镜头消失在 Flexslider 图像后面。

要解决这个问题，我们必须对 elevateZoom 插件说：“嘿，当我点击幻灯片 li 时，请将大于 1 的 z-index 放入我点击的那个 li 的 zoomContainer"，但是 elevateZoom 没有任何选项可以帮助我们这样做，因此我们必须直接在这些 li 上工作：我创建了一个函数，将 z-index:2 放在当前 li 的 zoomContainer 上。

$("#carousel .slides li").click(function(){
  controll($(this).index())
})

function controll(myIndex){
  var i = 0
  $(".zoomContainer").each(function() {
    var myPos= (i == myIndex) ? 2 : 0;
    $(this).css({"z-index": myPos});
    i++;
  });
}

当然，当我加载页面时，我必须将 z-index:2 放在第一个 li:

$(window).on('load', function(){
  controll(0)
});

这是所有代码：https://codepen.io/ReSedano/pen/JBxEGw 这是我对问题性质的看法。 :)

编辑 1：我在 Windows 上用 Chrome 和 Firefox 试过这段代码。我只添加了一个加载程序，因为你可能在 onload 事件上遇到了问题。我尝试了几次，它总是有效，我从未见过你在评论中说的错误：

$(document).ready(function(){
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 135,
    itemMargin: 5,
    asNavFor: '#slider',
  });

  $('#slider').flexslider({
    animation: "fade",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel" });

  $(".zoom").elevateZoom();
})

$(window).on('load', function(){
  controll(0);

  $(".loader").remove();
});

$("#carousel .slides li").click(function(){
  controll($(this).index())
})

function controll(myIndex){
  var i = 0

  $(".zoomContainer").each(function() {
    var myPos= (i == myIndex) ? 2 : 0;
    $(this).css({"z-index": myPos});
    i++;
  });
}

  .flexslider {
    margin-bottom: 0 !important;
  }

  .slider-for div img {
    width: 350px;
    height: 150px;
  }

  .slider-nav {
    margin-top: 10px;
  }
  .slider-nav div img {
    width: 80%;
    height: 50px;
  }

  .slick-slide {
    outline: 0;
  }

  .flex-direction-nav a:before {
    font-size: 30px;

  }

  #slider ul.flex-direction-nav li a {
    display: none !important;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>

<div class="loader"></div>
<div class="container">
  <div class="row">
      <div class="col-md-6">
    <div class="flexslider" id="slider">
       <ul class="slides">
         <li>
            <img class="zoom" src="http://placehold.it/350x200/A93226/ffffff" data-zoom-image="http://placehold.it/1901x600/A93226/ffffff">
         </li>
         <li>
            <img class="zoom" src="http://placehold.it/350x200/2980B9/ffffff" data-zoom-image="http://placehold.it/1902x600/2980B9/ffffff">
         </li>
         <li>
            <img class="zoom" src="http://placehold.it/350x200/17A589/ffffff" data-zoom-image="http://placehold.it/1903x600/17A589/ffffff">
         </li>
         <li>
             <img class="zoom" src="http://placehold.it/350x200/F1C40F/ffffff" data-zoom-image="http://placehold.it/1904x600/F1C40F/ffffff">
        </li>
         <li>
             <img class="zoom" src="http://placehold.it/350x200/6C3483/ffffff" data-zoom-image="http://placehold.it/1904x600/6C3483/ffffff">
        </li>
         <li>
           <video width="100%" height="100%" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
         </li>
      </ul>
    </div>
    <div id="carousel" class="flexslider">
      <ul class="slides">
        <li>
          <img src="http://placehold.it/350x150/A93226/ffffff">
        </li>
        <li>
          <img src="http://placehold.it/350x150/2980B9/ffffff">
        </li>
        <li>
          <img src="http://placehold.it/350x150/17A589/ffffff">
        </li>
        <li>
          <img src="http://placehold.it/350x150/F1C40F/ffffff">
        </li>
        <li>
          <img src="http://placehold.it/350x150/6C3483/ffffff">
        </li>
         <li>
          <img src="http://placehold.it/350x150">
        </li>
        <!-- items mirrored twice, total of 12 -->
      </ul>
</div>
  </div>
  </div>
</div>

flexslider 和 elevatezoom 的动画错误

Animation bug wtih flexslider and elevatezoom

jquery

flexslider

elevatezoom