bxSliderを使用したMagnify.js

Question

bxSliderスライドにMagnify.jsを実装しようとしていますが、ズームエフェクトはスライドの最初の画像で機能します。次のスライドに移動すると、それは最初のものである。スライドのすべての画像には、私がでターゲティングしている「ズーム」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/>の "データ・拡大-SRC" 属性を交換する必要があります要素を「大きい」画像URLに追加し、ALSO（EDITED）はスライドが変更されるたびに.magnify（）関数を追加します。