jquery - 使用 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() .