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

Tanatut Varavut
Tanatut Varavut
13,137 Points
Posted by Tanatut Varavut
Tanatut Varavut
13,137 Points

Please help, My "next" button not working.

I did everything i could, but still don't know what to do next. My 'Next' button won't work and i don't understand why. Give me some hint for the next step please~

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Photo Gallery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
  <body>

      <div class="searchBox">
        <input type="search" placeholder="search">
      </div>

     <div id="gallery">

        <div class="thumb image1"><a href="photos/1.jpg"><img src="photos/thumbnails/01.jpg" alt="pic01, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, "></a></div>

        <div class="thumb image2"><a href="photos/2.jpg"><img src="photos/thumbnails/02.jpg" alt="pic02, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image3"><a href="photos/3.jpg"><img src="photos/thumbnails/03.jpg" alt="pic03, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image4"><a href="photos/4.jpg"><img src="photos/thumbnails/04.jpg" alt="pic04, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image5"><a href="photos/5.jpg"><img src="photos/thumbnails/05.jpg" alt="pic05, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image6"><a href="photos/6.jpg"><img src="photos/thumbnails/06.jpg" alt="pic06, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image7"><a href="photos/7.jpg"><img src="photos/thumbnails/07.jpg" alt="pic07, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image8"><a href="photos/8.jpg"><img src="photos/thumbnails/08.jpg" alt="pic08, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image9"><a href="photos/9.jpg"><img src="photos/thumbnails/09.jpg" alt="pic09, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image10"><a href="photos/10.jpg"><img src="photos/thumbnails/10.jpg" alt="pic10, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image11"><a href="photos/11.jpg"><img src="photos/thumbnails/11.jpg" alt="pic11, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

        <div class="thumb image12"><a href="photos/12.jpg"><img src="photos/thumbnails/12.jpg" alt="pic12, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"></a></div>

     </div>

      <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
      <script src="lightbox.js"></script>


  </body>
  </html>

JS

//Create Lightbox

var $overlay = $('<div class="overlay"></div>');
var $image = $('<img>');
var $caption = $('<p></p>');

// Button
var $next = $('<button class="nex">&rsaquo;</button>');
var $prev = $('<button class="pre">&lsaquo;</button>');
var $exit = $('<button class="exi">&times;</button>');

// Append
$overlay.append($exit);  //Exit button

$overlay.append($prev);  //Previous button

$overlay.append($image);  //Image

$overlay.append($next);  //Next button

$overlay.append($caption);  //A caption

$('body').append($overlay);  // Add overlay

// Click event
$("a").click(function(event) {
    event.preventDefault();  // Default
    currentImageLocate(this);
    console.log($(this).attr('href'));
    $overlay.show();   //show the overlay
}); 


//triggers when you click on your next button
$('.nex').click(function(event) {
    nextImageLocate(".thumb")
});

$(".pre").click(function(event) {

});


$exit.click(function() { // when overlay click
    $overlay.hide();  //Hide the overlay
});    



//Current Image LOCATION and CAPTION function
function currentImageLocate (currentImage) {
    var imageLocation = $(currentImage).attr("href");
    $image.attr("src", imageLocation);
  // CAPTION    
    var captionText = $(currentImage).children("img").attr('alt');
    $caption.text(captionText);
}


//Next Image LOCATION and CAPTION function
function nextImageLocate (nextImage) {
    $image.removeAttr("src")
    var nextImageLocation = $(nextImage).next().children("a").attr('href');
    $image.attr("src", nextImageLocation);

   // CAPTION    
    captionText = $(nextImage).next().children("img").attr('alt');
    $caption.text(captionText);
}

Sorry about my poor English.

1 Answer

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

:point_right: One thing got my attention immediately.

At first glance, it looks like your nextImageLocate function is designed to take an identifier of a DOM element as an argument (nextImage). But when it is called from the button click handler, it is passed ".thumb" which will identify a set of images (and the same collection every time). Then, since the .attr method always uses the first element of a set, the image source and caption text will always be set to the values for the second item of the set.