使用 jQuery 显示更大版本的缩略图


show a larger version of thumbnail image with jquery

我正在尝试让我的(JQuery)代码显示缩略图的更大版本。目前我有这段代码,它只显示"全尺寸"的缩略图:

$(".gallerythumbnail").click(function() {
    $(".showimagelightdown, .showimagecontainer, .closeimage").fadeIn(300);
    var img = $('<img />', { src : this.src });
    $('.showimagecontainer').html(img).show();
});

我尝试了不同的方法,包括:

$(".gallerythumbnail").click(function() {
    $(".showimagelightdown, .showimagecontainer, .closeimage").fadeIn(300);
    var img = $('<img />', { src : 'f'+this.src });
    $('.showimagecontainer').html(img).show();
});

上面我试图在图像路径中添加一个"f",这将是缩略图的完整版本,但没有运气。那么,是否可以在点击图像的路径中添加一些东西?或者有没有更聪明的方法?

至于html,我有一个循环(PHP)贯穿文件夹中的所有图像,并将它们打印出来,如下所示:

print "<td><a href='#'><img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'></a></td>";
您将在

完整路径的开头添加"f",而不是文件名的开头。

因此,如果您有以下路径:

http://mydomain.com/galleries/gallery2/4886193_460s.jpg

您正在执行此操作:

fhttp://mydomain.com/galleries/gallery2/4886193_460s.jpg

试试这个:

$(".gallerythumbnail").click(function() {
        $(".showimagelightdown, .showimagecontainer, .closeimage").fadeIn(300);
        var path = this.src.replace(/[^'/]*$/,'');
        var filename = this.src.replace(/^.*['''/]/, '')
        var img = $('<img />', { src : path + 'f' + filename});     
        $('.showimagecontainer').html(img).show();
    });

这将像这样创建 src:

http://mydomain.com/galleries/gallery2/f4886193_460s.jpg