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”）中点击相应的缩略图时是否可以显示每个较大的图像？ < / p>

注意：我有大约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');
        }
    });

参考文献：

jQuery的：
- appendTo()。
- attr()。
- clone()。
- empty()。
- eq()。
- index()。
- show()。
'普通'JavaScript
- indexOf()。
- replace()。

Answer 2

试试这个：

$("img").click(function(){
    var largesrc = $(this).attr("src").replace("thumb","large");
    $("#rightbox").html('<img src="'+largesrc+'" width="560" height="297" class="largeimage" />');
});

单击img时，此函数将获取图像src，将文件夹拇指替换为大，然后将其作为图像放在右框div中的src中。这将对您页面上的所有图像执行此操作，因此您可能希望为较小的图片提供一组“smallimage”或类似图片，然后将第一行更改为$(".smallimage").click(function(){

Answer 3

这会有帮助吗？只需改变给定的宽度即可自动改变高度。

$(document).ready(function() {
        $(".imgtopleft").click(function() {
            $(".imgtopleftlargerimage").css("width","1000");
        });
});

Answer 4

我会将其作为源代码，然后劫持链接上的click事件。

<a href="group1/large/01.png" class="viewLargeImage">
   <img src="group1/thumb/01.png" width="160" height="97" class="imgtopleft" />
</a>

使用此JavaScript：

$('.viewLargeImage').click( function(event){
    event.preventDefault();
    var bigPath = $(this).attr('href');
    $(this).replaceWith( "<img src=" + bigPath + " />" );
});

如果需要显示在右栏中：

$('.viewLargeImage').click( function(event){
    event.preventDefault();
    var bigPath = $(this).attr('href');
    $('#rightbox').html( "<img src=" + bigPath + " />" );
});

然后谷歌可以索引大图片，没有JavaScript的人可以找到它们。

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

4 个答案: