關閉並恢復到一個簡單的jQuery畫廊的原始圖像？

我正在使用Papermashup.com的簡單jQuery庫，並需要幫助擴展它的功能。我目前有4張縮略圖和1張主圖片。但是，我希望能夠恢復到原始圖像，而不需要原始圖像的額外縮略圖。無論如何，當你點擊另一個縮略圖時，是否還原爲原始文件？關閉並恢復到一個簡單的jQuery畫廊的原始圖像？

HTML：

<div class="main"><img src="main.jpg"></div> 

<div class="thumbs"> 
    <a class="t" href="main-lrg.jpg" rel="1"><img src="main-1.jpg"></a> 
    <a class="t" href="main-lrg.jpg" rel="2"><img src="main-1.jpg"></a> 
    <a class="t" href="main-lrg.jpg" rel="3"><img src="main-1.jpg"></a> 
    <a class="t" href="main-lrg.jpg" rel="4"><img src="main-1.jpg"></a> 
</div>

JS：

$(function() { 
    $('.t').click(function() { 
     var image = $(this).attr('rel'); 
     $('.main').hide(); 
     $('.main').fadeIn('fast'); 
     $('.main').html('<img src="' + image + '">'); 
     return false; 
    }); 
});

來源

2013-04-10 jfrosty

因此，如果有人點擊你想要的主畫面改變縮略圖，但也恢復到原來的狀態。我不理解。 – James 2013-04-10 21:07:40

是的。所以如果我點擊一個縮略圖來查看圖像2，我也能夠關閉圖像2並查看原始圖像，圖像1.希望這有意義嗎？ – jfrosty 2013-04-10 21:09:36

你想如何關閉圖片2.我不認爲你想通過點擊另一個拇指來恢復原來的形象。也許如果你點擊同一個拇指或某種類型的mouseleave。 – James 2013-04-10 21:12:05

搶當DOM加載，所以你必須對它的引用原始圖像src屬性。然後，當您想要再次顯示原始圖像時，您可以將主圖像的src屬性重新設置爲原始圖像。舉例來說，如果你有一個按鈕，id爲「關閉」這應該顯示原始圖像會是這個樣子：

$(function() { 
    var original = $('.main img').attr('src'); 

    $('#close').click(function() { 
     $('.main img').attr('src', original); 
     $(this).hide(); 
    }); 

    $('.t').click(function() { 
     var image = $(this).attr('rel'); 
     $('.main').hide(); 
     $('.main').fadeIn('fast'); 
     $('.main').html('<img src="' + image + '">'); 
     $('#close').show(); 
     return false; 
    }); 
});

來源

2013-04-10 21:32:07 clav

只有當您點擊其中一個縮略圖時纔有辦法顯示關閉嗎？ – jfrosty 2013-04-10 21:36:10

當然，我更新了答案，因此當您單擊拇指時會顯示關閉按鈕，並在顯示原稿時隱藏。你會想添加CSS來隱藏按鈕。 – clav 2013-04-10 21:38:43

謝謝。正是我所期待的。謝謝謝謝！ – jfrosty 2013-04-10 21:44:39

關閉並恢復到一個簡單的jQuery畫廊的原始圖像？

回答

相關問題