帶bxSlider的Magnify.js

Question

我正在嘗試將Magnify.js實現為bxSlider幻燈片，但是我有一個問題，縮放效果僅適用於幻燈片的第一個圖像，一旦移至下一個圖像，效果將不起作用，但確實如此在第一個。 幻燈片的所有圖像都有一個“縮放” 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”屬性替換為“大”圖像URL，並且每當幻燈片更改時，ALSO（已編輯）也將添加.magnify（）函數。