Magnify.js 与 bxSlider

Question

我正在尝试实现 Magnify.js to a bxSlider 幻灯片，但我遇到了问题，缩放效果仅适用于幻灯片的第一张图片，一旦我移动到下一张图片，效果将不起作用, 但它在第一个上。幻灯片的所有图像都有一个 "zoom" id，我用 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();
});

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

Magnify.js 与 bxSlider

Magnify.js with bxSlider

javascript

jquery

bxslider

magnify