javascript - div内的图像交换onclick

Question

我想在点击时替换图像，但也希望将替换的图像点击到灯箱。这是我的第一张图片有灯箱的例子：http ://www.artdesigngroup.co/products/test.html

我的想法是我需要在周围的 div 上应用“显示”ID 并替换此 div 中的图像。但是我该如何做到这一点并创建灯箱？

谢谢你。

Answer 1

我会重新考虑您处理此问题的结构。您正在做的大部分事情都可以使用直接的 jQuery 来处理，而不是滚动您自己的交换函数。当您提出问题时，包括 Fiddle 是更快获得答案的好方法。请注意，我在prop这里使用的是 jQuery 1.7 的方法，您应该使用它而不是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>