使用jQuery如何在点击缩略图时在目标div中打开更大的图片？

Question

我有一个div作为目标:

<div id="rightbox"></div>

我有按组组织的缩略图:

<img src="group1/thumb/01.png" width="160" height="97" class="imgtopleft" />
<img src="group1/thumb/02.png" width="160" height="97" class="imgtopright" />
<img src="group2/thumb/01.png" width="160" height="97" class="imgbottomleft" />
<img src="group2/thumb/02.png" width="160" height="97" class="imgbottomright" /> 

我有一个对应于每个拇指的较大图像:

<img src="group1/large/01.png" width="560" height="297" class="largeimage" />
<img src="group1/large/02.png" width="560" height="297" class="largeimage" />
<img src="group2/large/01.png" width="560" height="297" class="largeimage" />
<img src="group2/large/02.png" width="560" height="297" class="largeimage" /> 

我想知道是否可以通过使用函数在目标div(带有id ="rightbox")中单击相应的缩略图时显示每个较大的图像？

注意:我有大约10组缩略图和相应的较大图像,每个缩略图都在特定的文件夹中.我可以把所有的图像在同一目录中,并使用不同的命名规则,如image01_thumb.jpg和image01_large.jpg,但底线是,我想能够在目标div来打开每个拇指的.

我已经查看了这一切,但还没有找到这个确切的问题.

非常感谢所有的建议和帮助.

Answer 1

假设#rightbox元素中已存在大图像,我建议:

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').hide();
            $('#rightbox img').eq(that.index()).show();
            /* or:
            var newSrc = that.attr('src').replace('thumb','large');
            $('img[src="' + newSrc + '"]').show();
            */
        }
    });

但是,如果它们存在于DOM中,而不是存在于#rightbox:

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').empty();
            var newSrc = that.attr('src').replace('thumb','large');
            $('img[src="' + newSrc + '"]').clone().appendTo('#rightbox');
        }
    });

如果它们不在DOM中,但必须创建:

$('img').click(
    function(){
        var that = $(this);
        if (that.attr('src').indexOf('thumb')>-1){
            $('#rightbox img').empty();
            var newSrc = that.attr('src').replace('thumb','large'),
                newImg = $('<img />',{src : newSrc}).appendTo('#rightbox');
        }
    });

参考文献:

1. jQuery的:
   • appendTo().
   • attr().
   • clone().
   • empty().
   • eq().
   • index().
   • show().
2. '普通'JavaScript
   • indexOf().
   • replace().