使用jQuery snipe合併入畫廊

我玩弄jQuery.snipe，試圖讓它與畫廊中的幾張圖片一起工作。使用jQuery snipe合併入畫廊

在HTML
你有一個圖像與SRC，「數據縮放」屬性，和ID。
每個縮略圖都有一個src，一個「data-zoom」屬性和一個包含在無序列表中的id。

JS僞代碼
點擊li中的每個img運行一個函數。
該函數將src，「data-zoom」屬性和點擊圖像的id存儲到相應的變量中。

然後它將大圖像src，「data-zoom」屬性和id更改爲變量中的大圖像src，「data-zoom」屬性和id。

然後運行snipe（）方法，將變量中的id作爲選擇器。

問題
當單擊縮略圖時，大圖像發生變化，並且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>

來源

2013-05-22 roryWolf

我從頁面移除圖像，並用填充變量一個新的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>

$('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-23 22:30:48 roryWolf

使用jQuery snipe合併入畫廊

回答

相關問題