0

我在玩jQuery.snipe，试图让它与画廊中的一些图像一起工作。

在 HTML
中，您有一个带有 src、“data-zoom”属性和 id 的图像。
每个缩略图都有一个 src、一个“data-zoom”属性和一个 id，包含在一个无序列表中。

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

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

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

问题
单击缩略图时，大图像会发生变化，并且狙击工作正常。然后，当您单击不同的缩略图时，大图片会发生变化，但放大镜中的图像与单击的第一个图像相同。我查看了狙击库，但看不出哪里有问题。

我的代码 

<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>
4

1 回答 1

0

我通过从页面中删除图像并使用变量填充新的 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();
});
于 2013-05-23T22:30:48.797 回答