jquery найти следующее изображение после щелкнутого экземпляра

Я пытаюсь настроить галерею изображений, где вы можете щелкнуть большим пальцем, и из этого вы можете использовать кнопки «Далее» и «Предыдущий». Моя проблема заключается в том, что пользователь может сначала щелкнуть любое изображение, которое мне нужно обнаружить, и тренировку, которая будет следующим или предыдущим изображением, и заменить display src на src следующего изображения. Я только пытаюсь заставить следующую кнопку работать первой, так как предыдущая будет работать по тому же принципу. Я пытался использовать .next(), но это меня действительно сбило с толку.

Любая помощь с этим будет здорово.

Вот 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);
});

image jquery next find gallery
person huddds    schedule 17.05.2013    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Вот пример с работающими кнопками «Предыдущая» и «Далее»: 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');
});
person claustrofob    schedule 17.05.2013

arrow_upward
1
arrow_downward

Вам нужно установить текущее изображение по клику:

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

Затем измените код при следующем щелчке на это:

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

См. пример на странице http://jsfiddle.net/c9Jkv/24/.

person sroes    schedule 17.05.2013

arrow_upward
0
arrow_downward

Я обновил ваш код, установив добавление класса selected к текущему выбранному изображению и используя его, чтобы «найти» следующий эскиз.

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

Это кажется довольно надуманным, и было бы немного проще, если бы вы просто поддерживали какую-то структуру данных, например. массив или объект или что-то, что может сделать его немного проще, вместо того, чтобы полагаться на DOM, чтобы сделать все.

person Thomas Clayson    schedule 17.05.2013
comment
Проблема, с которой я сталкиваюсь, заключается в том, что это должно работать на сотнях жестко закодированных страниц, поэтому у меня очень мало работы, и это был практически единственный способ заставить это работать, не меняя структуру сотен страниц. - person huddds; 17.05.2013
comment
Это не требует изменения исходного кода. В jQuery добавлено около 3 строк, которые делают все за вас. :) - person Thomas Clayson; 17.05.2013

arrow_upward
-2
arrow_downward

Я бы предложил использовать Colorbox или Shadowbox

person Andrey    schedule 17.05.2013
comment
Также я упомянул в предыдущих комментариях, почему я не могу просто использовать плагин - person huddds; 20.05.2013