Magnify.js与bxSlider

Question

我试图将Magnify.js实现到bxSlider幻灯片上，但我遇到了一个问题，缩放效果只适用于幻灯片的第一张图像，当我移动到下一张幻灯片时，效果就不会起作用，但在第一张幻灯片上就会起作用。所有幻灯片的图像都有一个“缩放”id，这是我用放大镜瞄准的。有什么方法可以让它在整个幻灯片上运行，而不仅仅是第一个吗？

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

您需要将<img/>元素上的“data-magnify src”属性替换为“大”图像URL，并在每次幻灯片更改时(编辑)添加.magnify()函数。