jquery查找點擊實例後的下一個圖像

我想設置一個圖片庫，您可以點擊一個拇指，然後您可以使用next和prev按鈕。我的問題是，用戶最初可以點擊我需要檢測的任何圖像以及下一張或上一張圖像的鍛鍊，並將顯示器的src替換爲下一張圖像的src。我只是試圖讓下一個按鈕工作，因爲以前的工作原理是一樣的。我一直在嘗試使用.next（），但它真的讓我感到困惑。jquery查找點擊實例後的下一個圖像

任何幫助，這將是偉大的。

這裏是什麼，我有一個jsfiddle以下是我寫的jQuery的，問題是下一個按鈕，底部位：

var numImgs = $('div.locationGallery .polaroidImage').length; 
var prevImages = $('.polaroidImage').prevAll().length; 
var thisImage; 
var imageClicked; 
var nextImage; 
var nextImage; 

$('.polaroidImage').click(function(){ 
    var prevImages = $(this.parentNode).prevAll().find('.polaroidImage').length; 
    if(prevImages > 0){ 
     $('.prev').show(); 
    }else{ 
     $('.prev').hide(); 
    } 
    if(prevImages == (numImgs - 1)){ 
     $('.next').hide(); 
    }else{ 
     $('.next').show(); 
    } 
}); 

$(".thumb").click(function(){ 
     imageClicked = ''; 
     imageClicked = $(this).attr('src'); 
    $(".imageDisplay").find('img').remove(); 
    $(".imageDisplay").append("<img src='"+imageClicked+"' />") 
}); 

$('.next').click(function(){ 
    nextImage = $('.imageContainer').next('img').attr('src'); 
    alert(nextImage); 
});

來源

2013-05-17 huddds

這裏是工作的上一個和下一個按鈕的例子：http://jsfiddle.net/8FMsH/1/ 拇指點擊您需要保存當前圖像：

$(".thumb").click(function(){ 
    imageClicked = $(this); 
    $(".imageDisplay").find('img').remove(); 
    $(".imageDisplay").append("<img src='"+imageClicked.attr('src')+"' />") 
}); 

$('.next').click(function(){ 
imageClicked.closest('.imageContainer').next().find('img').trigger('click'); 
}); 

$('.prev').click(function(){ 
imageClicked.closest('.imageContainer').prev().find('img').trigger('click'); 
});

來源

2013-05-17 14:51:12 claustrofob

感謝您的幫助 – huddds

您需要設置點擊當前圖像：

thisImage = $(this).closest('.imageContainer');

然後改變的代碼下點擊這個：

nextImage = thisImage.next().find('.thumb').attr('src');

看到http://jsfiddle.net/c9Jkv/24/

來源

2013-05-17 14:43:50 sroes

-2

的例子，我會建議使用Colorbox或Shadowbox

來源

2013-05-17 14:44:20 Andrey

這應該是一個評論。 – undefined

此外，我在前面的評論中提到，爲什麼我不能使用插件 – huddds

我已經設置添加類的selected到當前選定的圖像，並使用「找到」下一個拇指更新你的代碼。

http://jsfiddle.net/c9Jkv/25/

這似乎很做作不過，如果你只是保持某種數據結構，例如，它可能會更容易一點一個數組或對象或其他可能使它更容易一些的東西，而不是依靠DOM去做所有事情。

來源

2013-05-17 14:45:29

我有這個問題是需要在數百個硬編碼頁面上工作，所以我幾乎沒有工作，這幾乎是我能想到的唯一方法在不改變數百頁的結構的情況下實現此功能 – huddds

這不需要更改任何源代碼。大約有3行添加到jQuery中，它爲你做了一切。 :) –

jquery查找點擊實例後的下一個圖像

回答

相關問題