Question

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

请告诉我这是一个像这样的画廊的最佳方法。

提前致谢。

-B

Answer 1

类似的东西：

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

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

（1）使用Events/live：

$('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', ''));
        });
    });

});

jQuery图像更改 - 图库视图

4 个答案: