Javascript div内的图像交换onclick

我想更换点击图像，但也有一个灯箱更换图像点击。下面是我的示例，其中第一个图像具有lightbox：

我的想法是，我需要在周围的div上应用displayid，并替换该div中的图像。但是我如何做到这一点并创建lightbox呢

---

谢谢。

我会重新考虑您处理此问题的结构。您正在做的大部分工作都可以使用直接jQuery处理，而不是滚动您自己的交换函数。当你问你的问题时，包括小提琴是一个快速得到答案的好方法。请注意，我在这里使用jQuery1.7的prop方法，您应该使用它而不是attr

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>

---

你应该接受前面问题的一些好答案。这就是如何管理声誉。