CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Stefan C
Stefan C

Reputation: 123

How to target next image to be displayed?

I have a gallery that shows images and also needs to do navigation to the next and previous image. I really don't know how to make them work.

The structure of my work is in this fiddle.

I need to make it work so that when I click on next it opens the next image and when I press prev it opens the previous image.

Upvotes: 2

Views: 251

Answers (1)

CodeToad
CodeToad

Reputation: 4724

I think you should apply the selected classname to the image currently in view.

Upon clicking the "next" button, shift the selected class to the next element like this:

$('.selected').removeClass('selected').next().addClass('selected');

This way you track exactly one element at time, and can show that specific element.

In your getNext function, x.length === 0 (it's empty) because it's trying to find .popup_img in this, and this is the button that was clicked.

function getNext(){
  debugger;
    var x = jQuery(this).find('.popup_img');
  jQuery('.popup_img').hide();  
  jQuery('.popup_img').next('.popup_img').show();
    
  console.log(x);
}

EDIT: here are improved next and prev functions:

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/

Upvotes: 1

Related Questions