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

});