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 に答える