带有 flexslider 和 elevatezoom 的动画错误答案

【问题标题】：Animation bug wtih flexslider and elevatezoom带有 flexslider 和 elevatezoom 的动画错误
【发布时间】：2018-08-10 17:04:22
【问题描述】：

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

我花了一段时间才缩小问题范围：如果将 flexslider 动画设置为“滑动”，则变焦镜头会正确显示，但如果将动画设置为“淡入淡出”，则会隐藏在图像后面。

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

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

现在#slider 的动画设置为滑动，并且变焦镜头可见。但如果动画未显示或设置为“淡出”，则变焦镜头会消失在图像后面。

除了 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;
}

$('#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();

【问题讨论】：

标签： jquery flexslider elevatezoom

【解决方案1】：

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

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

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

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

要解决这个问题，我们必须对 elevateZoom 插件说：“嘿，当我点击幻灯片 li 时，请在我点击的那个 li 的 zoomContainer 中放一个大于 1 的 z-index” ，但是 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>

【讨论】：

感谢您的回复。我理解你的逻辑，看起来一些问题已经解决，但是在你的 Codepen 中，旋转木马中的前两项在缩放时显示相反的图像（红色显示蓝色，蓝色显示红色；黄色和绿色缩放正确）。这类似于我尝试更改 z-index 时遇到的问题。出于某种原因，更改 z-index 会导致某些缩略图显示错误的图像。
正如我在编辑中所说，我多次尝试了我的代码，但我从未见过你说的错误。也许这是codepen的问题？我真的不知道。如果，由于某种原因，你仍然看到那个错误，我真的不知道如何解决它，因为我无法复制这个问题。所以我们必须等待另一个用户的解决方案。对不起:)
在带有 Firefox 浏览器的 Mac 上，前两种颜色会切换。我正在使用 Mac 和 Chrome 浏览器，它可以工作！我将支持您的答案，因为它适用于 Chrome。希望我能解决 Mac/Firefox 问题。谢谢！
赞成-它现在可以在 Chrome 和 Firefox 上运行。感谢您的帮助！
哦。我真的很高兴！ :) 你了解 Mac 上的 firefox 的问题是什么吗？