Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Prev()/Next() - jQUery

How can i get this carousel working with Prev and next? iv tried many things but it doesn't work.

How can i target th ebig overlay image, and not hide the smaller images when i click? I eman if you try it ud know.

codepen

Anthony Babich
Anthony Babich
5,505 Points

I see what you mean and I'm not entirely sure of the solution but shouldn't you be handling the images differently? Like when I click the button, it hides all of the originals. Shouldn't the main thumbnail images be separated as thumbnail vs large image?

I just don't know where to start to break it up without going through it all. And then the large image inside the carousel looks messed up (presumably because its not the large image its the thumbnail image being displayed and targeted and changed)

Just my two cents I like to try to help, good luck!

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

I posted this over in the other thread as well, but here is a possible solution:

You'll need to update the src attribute of the overlay image, instead of working on the gallery images. Try something like...

$(nextBtn).click(function(){
  var $images = $('.gallery-box-wrapper img'); // A list of the images in your gallery.
  var $currentImg = $('.gallery-box-wrapper img[src="' + $('#overlay img').attr('src') + '"]'); // The current img being overlayed.
  var $nextImg = $($currentImg.closest('div').next().find('img')); // The next img in the gallery.

  if ($nextImg.length > 0) { // If there is a next img, display it.
    $('#overlay img').attr('src', $nextImg.attr('src'));
  } else { // Otherwise, if you've reached the end, loop back to the first img.
    $('#overlay img').attr('src', $($images[0]).attr('src'));
  }
});

That might not be the most elegant way to do it, but it should get you started. I tried to leave comments, but let me know if anything doesn't make sense.