Question

我想在点击时替换图像，但也可以将替换的图像点击到灯箱。以下是第一张图片包含灯箱的示例：http://www.artdesigngroup.co/products/test.html

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

谢谢。

Answer 1

我会重新考虑你的结构来处理这个问题。您正在做的大部分内容都可以使用直接jQuery处理，而不是滚动自己的交换功能。当您提出问题时，包括小提琴是一个很快得到答案的好方法。请注意，我在这里使用jQuery 1.7＆＃39} 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>

div中的图像交换onclick

1 个答案: