Question

我正在玩jQuery.snipe，试图让它与图库中的一些图像一起使用。

在HTML中
你有一个带有src，“数据缩放”属性和id的图像每个缩略图都有一个src，一个“数据缩放”属性和一个包含在无序列表中的id。

JS伪代码
点击li中的每个img运行一个函数。
该函数将src，“data-zoom”属性和单击图像的id存储到相应的变量中。

然后将大图像src，“data-zoom”属性和id更改为变量中的。

然后运行snipe（）方法，将变量中的id作为选择器。

问题
单击缩略图时，大图像会发生变化，并且snipe工作正常。当您单击其他缩略图时，大图片会发生变化，但放大镜中的图像与单击的第一张图像保持一致。我已经浏览了一下snipe库，我无法看到哪里有问题。

我的代码

<body>
    <div id="photoGal">
        <img src="picSmall.jpg" data-zoom="pic.jpg" id="snipe" />
    </div>
    <div id="thumbs">
        <ul>
            <li><img id="snipe" style="max-height:10%; max-width:10%"  src="picSmall.jpg" data-zoom="pic.jpg" /></li>
            <li><img id="snipe2" style="max-height:10%; max-width:10%" src="pic2Small.jpg" data-zoom="pic2.jpg" /></li>
        </ul>
</div>

<script type="text/javascript">
$('li img').on("click" , function(){
    var source = $(this).attr('src');
    var dataSource = $(this).attr('data-zoom');
    var tag = $(this).attr('id');

     $('#photoGal img').attr("src", source);
     $('#photoGal img').attr("data-zoom", dataSource);
     $('#photoGal img').attr("id", tag);
     $('#'+tag).snipe();
});
</script>
</body>

Answer 1

我通过从页面中删除图像并使用变量填充新的html（）字符串来修复此问题。

新代码

<强> HTML

<div id="photoGal" >
<img src="pic.jpg" data-zoom="pic.jpg" id="snipe" style="max-height:40%; max-width:40%" />
</div>


    <ul>
    <li><img class="element isotope-item"    src="thumbs/pic.jpg" data-zoom="pic.jpg" /></li>
    <li><img class="element isotope-item"   src="thumbs/pic2.jpg" data-zoom="pic2.jpg"  /></li>
    <li><img class="element isotope-item"   src="thumbs/pic3.jpg" data-zoom="pic3.jpg"  /></li>
    </ul>

<强> JS

$('li img').on("click" , function(){



    $('#photoGal img').remove();


    var source = $(this).attr('src');
    var dataSource = $(this).attr('data-zoom');
    var tag = $(this).attr('id');
    console.log(s);

    $('#photoGal').html('<img style="max-height:40%; max-width:40%" src=" ' + source + '" data-zoom=" ' + dataSource + '" id="snipe" />');

     $('#snipe').snipe();
});

使用jQuery snipe合并到一个库中

1 个答案: