javascript - Magnify.js と bxSlider

Question

Magnify.jsをbxSliderスライドに実装しようとしていますが、問題があります。ズーム効果はスライドの最初の画像でのみ機能し、次の画像に移動すると効果は機能しませんが、機能します最初のもので。スライドのすべての画像には、 Magnifyでターゲットにしている「ズーム」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();
});

要素の「data-magnify-src」属性を<img/>「大きな」画像 URL に置き換える必要があります。また、スライドが変更されるたびに .magnify() 関数を追加します (編集済み)。