javascript - jQuery 图像更改 - 图库视图

Question

我在画廊中有一张大图像，当在下面的无序列表中单击其中一个缩略图时，该图像需要更改。图像是动态进入的，因此 jquery 脚本需要能够获取缩略图的 src，从文件名中删除“-thumb”，然后用新的源替换大图像。

请让我知道我对这样的画廊的最佳方法是什么。

提前致谢。

-B

Answer 1

就像是：

$('img.thumb').click(function() {
    var src = $(this).attr('src');
    $('#bigImage').attr('src', src.replace(/-thumb/,''));
});

如果您的拇指是通过 ajax 加载的，则以下示例适用：

(1) 使用事件/直播：

$('img.thumb').live("click", function() {
    var src = $(this).attr('src');
    $('#bigImage').attr('src', src.replace(/-thumb/,''));
});

(2) 作为对 jQuery 的 ajax 方法之一的回调（例如）：

function initThumbs()
{
    $('img.thumb').click(function() {
        var src = $(this).attr('src');
        $('#bigImage').attr('src', src.replace(/-thumb/,''));
    });
}

$('#thumbsDiv').load('thumbs.php?p=2', initThumbs);

Answer 2

karim79 的回答可以稍微缩短：

$('img.thumb').click(function() {
    $('#bigImage').attr('src', $(this).attr('src').replace(/-thumb/,''));
});

但除此之外，很好的答案！

Answer 3

对 karim79 的唯一补充是：

如果缩略图被放置在同一个父级中，那么在该父级上绑定一个事件会更好（优雅？）解决方案，即在所有缩略图上绑定事件。该事件被传播，因此您可以通过检查事件目标找到缩略图。

Answer 4

$().ready(function() {

    //get all images from unordered list and apply click function
    $('ul#myList img').each(function() {
        $(this).click(function() {
            $('#mainImage').attr('src', $(this).attr('src').replace('-thumb', ''));
        });
    });

});