Animation bug wtih flexslider and elevatezoom

Question

Working on a slider (flexslider) with a zoom effect (elevatezoom); the slider uses thumbnails as a nav for the slider. The issue is is with the display of the zoom lens.

It took me awhile to narrow down the issue: the zoom lens displays properly if the flexslider animation is set to "slide", but remains hidden behind the image if the animation is set to "fade".

I've tried a bunch of different z-index tests, even changing the z-index code in the elevatezoom files for the active image, but then the wrong image displays.

I found a codepen and forked it to show the issue - https://codepen.io/anon/pen/jpdOop

Right now the animation for #slider is set for slide and the zoom lens is visible. But if animation is not indicated or is set to "fade", the zoom lens disappears behind the image.

Is there something besides z-index that could cause this? Any ideas about where to look and I'm happy to run those down, just out of ideas as to the cause.

Thanks

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

ReSedano · Accepted Answer · 2018-08-13T10:00:00.797

Well, I read the code and maybe I understood the problem. First of all, elevatezoom creates a series of .zoomContainer to work with all your images, creating lens and all its stuff. All these containers haven't z-index set.

Second thing: Flexslider, when its animation is set on "slide", put every li on float, without set z-index 'cause it is a simple slide.

In this case, the two plugin works well together 'cause z-index don't cause any trouble.

The situation changes when you set the animation on "fade" 'cause here Flexslider put a z-index on li (1, precisely) to make the fade effect. Naturally, elevatezoom doesn't know this and continue to work without put z-index in its elements, so our lens disappears behind the Flexslider image.

To fix this problem, we have to say to elevateZoom plugin: "Hey, when I click on slide li, please put a z-index bigger than 1 to zoomContainer of that li I clicked", but elevateZoom haven't any options to help us to do so, therefore we have to work directly on those li: I created a function that put z-index:2 on zoomContainer of current li.

$("#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++;
  });
}

Naturally, when I load the page, I have to put z-index:2 to the first li:

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

This is all the code: https://codepen.io/ReSedano/pen/JBxEGw and this is my idea about the nature of the problem. :)

EDIT 1: I tried this code with Chrome & Firefox on Windows. I only add a loader 'cause maybe you have had a problem on onload event. I tried it several times and it always works and I never seen the bug you said in a comment:

$(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>

Thanks for your response. I understand your logic and it looks like some of the issue is resolved, but in your Codepen the first two items in the carousel are showing the opposite image when zoomed (the red shows the blue and the blue shows the red; both the yellow and green zoom properly). This is similar to the issue I encountered when I tried to change the z-index. For some reason, changing the z-index results in the wrong image displaying for certain thumbnails. — chowwy, Aug 12 '18 at 23:00
I tried my code many times, as I said in my edit, and I never seen the bug you said. Maybe it was a problem with a codepen? I really don't know. If, for some reason, you still see that bug I really don't know how to solve it 'cause I can't replicate the problem. So we have to wait a solution by another user. Sorry :) — ReSedano, Aug 13 '18 at 10:07
On Mac with a Firefox browser, the first two colors switch. I am using Mac and the Chrome browser it works! I am going to upvote your answer because it works on Chrome. Hopefully I can get a resolution on the Mac/Firefox issue. Thanks! — chowwy, Aug 13 '18 at 23:00
Upvoted-it's now working on both Chrome and Firefox. Thanks for your help! — chowwy, Aug 13 '18 at 23:03
Oh. I'm really happy! :) Did you understand what the problem was on firefox on Mac? — ReSedano, Aug 14 '18 at 05:53
It turns out there wasn't a problem with your solution. The issue was with something else I was testing. Thanks again! — chowwy, Aug 24 '18 at 19:19

Animation bug wtih flexslider and elevatezoom

1 Answers1