Question

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

我花了一点时间来解决这个问题：如果将flexslider动画设置为“ slide”，则变焦镜头可以正确显示，但是如果将动画设置为“ fade”，则变焦镜头仍隐藏在图像后面。

我尝试了很多不同的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();

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时，请给我单击的那个li的zoomContainer放置一个大于1的z索引” ，但是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放在第一行：

$(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的动画错误

1 个答案: