Magnify.js с помощью bxSlider

Question

Я пытаюсь реализовать Magnify.js на слайде bxSlider, но у меня есть проблема, эффект масштабирования работает только на самом первом изображении слайда, после перехода к следующему эффект не будет работать, но он работает на первом. Все изображения на слайде имеют идентификатор "увеличения", на который я нацеливаюсь с помощью Magnify.Есть ли способ заставить его работать для всего слайда, а не только для первого?

Answer 1

Попробуйте использовать следующий фрагмент: 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();
});

Вам нужно заменить атрибут "data-magnify-src" на <img/> элементы к "большому" URL-адресу изображения, а ТАКЖЕ (РЕДАКТИРОВАНИЕ) добавляет функцию.magnify() каждый раз, когда изменяется слайд.