Как настроить следующее изображение для отображения?

Question

У меня есть галерея, которая показывает изображения, а также должна делать навигацию к следующему и предыдущему изображению. Я действительно не знаю, как заставить их работать.

Структура моей работы в this fiddle.

Мне нужно сделать так, чтобы при нажатии на next он открывает следующее изображение, и когда я нажимаю prev, он открывает предыдущее изображение.

Answer 1

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

щелкать дальше, переместить выбранный класс к следующему элементу, как это:

$ ('выбран.) RemoveClass (' выбрано ') следующий() addClass (' выбрано');...

Таким образом, вы отслеживаете ровно один элемент во времени и можете показать этот элемент.

В функции GetNext, x.length === 0, ее пустой, потому что его пытаются найти «.popup_img» в „это“, и „это“ есть кнопка, которая была нажата

функция GetNext() { отладчик; var x = jQuery (this) .find ('. Popup_img'); jQuery ('. Popup_img'). Hide();
jQuery ('. Popup_img'). Next ('. Popup_img'). Show();

console.log(x); 
} 

EDIT:

здесь улучшаются дальше и функции предыдущая:

function getNext() { 
    var parent = jQuery(this).closest('.gallery-box-file'); 
    var currentImg = parent.find('.popup_img'); 
    var nextParent = parent.next(); 

    if (nextParent.length) { 
     currentImg.hide(); 
     nextParent.find('.popup_img').show(); 
    } 
} 

    function getPrev() { 
    var parent = jQuery(this).closest('.gallery-box-file'); 
    var currentImg = parent.find('.popup_img'); 
    var nextParent = parent.prev(); 

    if (nextParent.length) { 
     currentImg.hide(); 
     nextParent.find('.popup_img').show(); 
    } 
} 

http://jsfiddle.net/6Q4Va/5/