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

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

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

Animation bug wtih flexslider and elevatezoom

Answers (1)

Related Questions