1

在具有缩放效果 (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;
}

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();
4

1 回答 1

2

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

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

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

当您将动画设置为“淡入淡出”时情况会发生变化，因为这里 Flexslider 将 a z-indexon 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>

于 2018-08-11T01:42:52.827 回答