2

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.

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
Stefan C
  • 123
  • 2
  • 10

1 Answers1

1

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/

simmer
  • 2,639
  • 1
  • 18
  • 22
CodeToad
  • 4,656
  • 6
  • 41
  • 53
  • Hey CodeToad. Thanks for you post, i think myself about that and as you can see in the fiddle the big images have allready a class call imgs, but in this structure i guest i shold hide the current popup_img and open next popup_img (witch allready contain close button and next and prev button) . I try your way but i didn't have any luck. Can you help me with that? – Stefan C Jan 15 '14 at 14:31
  • I tried but your code is very difficult for me to understand. I am not exactly sure how the code is attempting to implement the gallery functionality. – CodeToad Jan 15 '14 at 14:58
  • The gallery must do 2 things: 1) open image as a popup (this is working); and 2) if i open an image i need that if i press next / prev button to open next / prev one in the same format. My ideea was to hide class pupup_img and open next / prev popup_img witch contain the image – Stefan C Jan 15 '14 at 15:16
  • yes, these are the requirements, but how the program is currently approaching this is not clear. the next/prev - where are they located? are they siblings of the popup_image? there also seems to be more than one popup_img at a time. have you tried debbuging your code in chrome dev tool, line by line, and check what is going on – CodeToad Jan 15 '14 at 15:38
  • Thanks again for your time. I have 20 div.gallery-box-file witch have inside some other divs(because we need to add some styles) and inside of each div.gallery-box-file there is a div.pupup_img that contain the big image (that should be display) the close button and a div.highslide-controls that containt an ul.li with prev and next. Are you haveing an global ideea? The close button works, the image is loaded nice but my problem is how to make next and prev – Stefan C Jan 15 '14 at 15:47
  • if each div.pupup_img is wrapper in a div.gallery-box-file, then you have to use prev and next on the div.gallery-box-file, because div.pupup_img. prev and next get sibling elements, meaning that they are directly next to each other in the dom – CodeToad Jan 15 '14 at 15:58
  • ok, here is a fiddle that helps a bit. the next and prev work now work now: http://jsfiddle.net/6Q4Va/5/ – CodeToad Jan 15 '14 at 16:08
  • waw, you are right! i'll digg in to learn it. Thanks! God bless you – Stefan C Jan 15 '14 at 16:34
  • Hello CodeToad. I make some small modification and so far is what i need, but i have a small problem. when i press next and open the next image i need to be center and for that i add to calculate top and left. My problem is that in my calculation i need next image width and height so that when open , it must have right coordinates. Problem is for next image it take dimensions from the prev image and if i do parent.next().find('.imgs').attr('src') it show corect code, but it i do parent.next().find('.imgs').width() it give me 0! please check [link] http://jsfiddle.net/6Q4Va/7 – Stefan C Jan 16 '14 at 11:11
  • 1
    I think you are going about this the wrong way. don't set the dimensions with javascript, use proper css instead. the width is zero on the hidden image, exactly because because its hidden 'display:none' http://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none – CodeToad Jan 16 '14 at 16:18
  • Thanks man, i didn't even think of this by now. you are absolutely right. Thanks for open my mind dude. Best regards – Stefan C Jan 16 '14 at 17:53