Magnify.js with bxSlider

Question

I'm trying to implement Magnify.js to a bxSlider slide but I have a problem, the zoom effect just works on the very first image of the slide, once I move to the next one the effect won't work, but it does on the first one. All of the slide's images have a "zoom" id which I'm targeting with Magnify. Is there any way to make it work for the whole slide instead of just the first one?

Answer 1

Try using the follow snippet: https://jsfiddle.net/L9fe0py3/5/

HTML:

<ul class="bxslider">
  <li><img id="img1" src="http://bxslider.com/images/home_slides/picto.png" data-magnify-src="http://bxslider.com/images/home_slides/picto.png" /></li>
  <li><img id="img2" src="http://bxslider.com/images/home_slides/houses.jpg" data-magnify-src="http://bxslider.com/images/home_slides/houses.jpg"/></li>
  <li><img id="img3" src="http://bxslider.com/images/home_slides/hillside.jpg" data-magnify-src="http://bxslider.com/images/home_slides/hillside.jpg"/></li>
</ul>
<img id="img4" src="http://bxslider.com/images/home_slides/hillside.jpg" data-magnify-src="http://bxslider.com/images/home_slides/hillside.jpg"/>

Javascript:

$(document).ready(function() {
    $('.bxslider').bxSlider({
      onSlideAfter:function(e){
        $(e).find('img').magnify();
      }
    });
    $('#img1,#img2,#img3,#img4').magnify();
});

You need to replace the "data-magnify-src" attribute on the <img/> elements to the "big" image URL, and ALSO (EDITED) add the .magnify() function everytime a slide changes.