使得jQuery的交換圖像插件針對新的超鏈接

Question

我使用的是Swap Image plugin，特別是不相交變換2.

Here's the live page

我試圖使目標圖像（左大圖）一個新的超鏈接，取決於在那裏加載的圖像。我正在使用的代碼是

<img class="swapImageDisjoint { sin: ['#main:images/big-head-4.jpg'], sout: ['#main:main:images/blank-slate.jpg'] }" src="images/head-1.jpg" alt="" /> 

感謝

Answer 1

你並不真的需要交換圖像做你想做什麼。您可以使用單擊方法完成所有操作。我把一個精簡的例子在這裏：

http://jsfiddle.net/3ENWq/

（在這個例子中，我使用了IMG作爲網址的鏈接網址，但他們顯然沒有相同）

我只需在名爲swapimg和swapurl的小圖片中添加一些額外的屬性即可。我使用點擊功能將這些加載到主圖像和我添加的主鏈接href中。如果您願意的話，我還會在each()上預加載所有大圖像。

$('.swapImage').click(function() { 

    $('#main').attr('src', $(this).attr('swapimg')); 
    $('#mainlink').attr('href', $(this).attr('swapurl')); 

}).each(function() { 

    var preloadImg = new Image(); 
    preloadImg.url = $(this).attr('swapimg'); 

}); 

如果你不想額外的屬性，你可以使用元數據，如交換圖像插件。如果你想要的話，我可以發佈一個例子。