在div中的圖像交換onclick

Question

我想替換點擊圖像，但也有被替換的圖像點擊一個燈箱。這裏是我的例子，其中第一個圖像具有燈箱：http://www.artdesigngroup.co/products/test.html

我的想法是，我需要在周圍的div上應用「顯示」ID並替換此div內的圖像。但我如何做到這一點，並創建燈箱？

謝謝。

Answer 1

我會重新考慮處理這個問題的結構。你正在做的大多數事情都可以用直接的jQuery來處理，而不是滾動你自己的交換函數。當你問你的問題，包括小提琴是一個更快得到答案的好方法。請注意，我在這裏使用jQuery 1.7的prop方法，而不是attr。

http://jsfiddle.net/txbqX/3/

jQuery來得到你想要的

//when main image is clicked, show it in colorbox 
$('#foo a').colorbox(); 

//when thumb is clicked, set main image to it 
$('div#thumbs img').click(function() { 
    $('#foo a').prop('href', $(this).prop('src')); 
    $('#foo img').prop('src', $(this).prop('src')); 
    return false; //stop link from navigating 
}) 

簡體HTML

<div id="foo" > 
    <a href="http://www.artdesigngroup.co/images/tv-frames/01.jpg"> 
     <img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="304" height="304" name="Display" id="display" /> 
    </a> 
</div> 

<br /> 
<div id="thumbs"> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="56" height="56" /> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/02.jpg" width="56" height="56" /> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/03.jpg" width="56" height="56" /> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/04.jpg" width="56" height="56" /> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/05.jpg" width="56" height="56" /> 
</div>