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 Carlos Arroyo
.a{fill-rule:evenodd;}techdegree seal-36
Carlos Arroyo
Front End Web Development Techdegree Graduate 15,431 Points

How do you make a previous and next buttons work, using JQuery?

I made a lightbox, and in the lightbox I have to add two arrows for previous and next. I can't figure out how to make those two buttons take me to the other pictures. Any help will be welcomed.

2 Answers

Ryan Zimmerman
Ryan Zimmerman
3,854 Points
Ryan Zimmerman
Ryan Zimmerman
3,854 Points

Are you looking for the event or the logic?

Carlos Arroyo
.a{fill-rule:evenodd;}techdegree seal-36
Carlos Arroyo
Front End Web Development Techdegree Graduate 15,431 Points

I am looking for an event. I have tried to make a function to do it, but it does not work for me. Here is what I have so far.

This is the html.

  <body>
      <ul class="images">
        <li><a href="img/01.jpg"><img src="img/01.jpg" width="100" alt="Hay Bales. I love hay bales. Took this snap on a drive through the countryside past some straw fields."></a></li>        
        <li><a href="img/02.jpg"><img src="img/02.jpg" width="100" alt="Lake. The lake was so calm today. We had a great view of the snow on the mountains from here."></a></li>        
        <li><a href="img/03.jpg"><img src="img/03.jpg" width="100" alt="Canyon. I hiked to the top of the mountain and got this picture of the canyon and trees below."></a></li>
        <li><a href="img/04.jpg"><img src="img/04.jpg" width="100" alt="Iceberg. It was amazing to see an iceberg up close, it was so cold but didn’t snow today."></a></li>
        <li><a href="img/05.jpg"><img src="img/05.jpg" width="100" alt="Desert. The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."></a></li>
        <li><a href="img/06.jpg"><img src="img/06.jpg" width="100" alt="Fall. Fall is coming, I love when the leaves on the trees start to change color."></a></li>
        <li><a href="img/07.jpg"><img src="img/07.jpg" width="100" alt="Plantation. I drove past this plantation yesterday, everything is so green!"></a></li>
        <li><a href="img/08.jpg"><img src="img/08.jpg" width="100" alt="Dunes. My summer vacation to the Oregon Coast. I love the sandy dunes!"></a></li>
        <li><a href="img/09.jpg"><img src="img/09.jpg" width="100" alt="Countryside Lane. We enjoyed a quiet stroll down this countryside lane."></a></li>
        <li><a href="img/10.jpg"><img src="img/10.jpg"  width="100" alt="Sunset. Sunset at the coast! The sky turned a lovely shade of orange."></a></li>
        <li><a href="img/11.jpg"><img src="img/11.jpg" width="100" alt="Cave. I did a tour of a cave today and the view of the landscape below was breathtaking."></a></li>
        <li><a href="img/12.jpg"><img src="img/12.jpg" width="100" alt="Bluebells. I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."></a></li>
        </ul>
      <button id="next" class="ui-icon ui-icon-caret-1-e">❯</button>
      <button id="prev" class="ui-icon ui-icon-caret-1-w">❮</button>
      <input type="hidden" id="img_no" value="0">
    </body>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

below is the jquery.

$(".images a").click(function(event) {
  event.preventDefault();
  var imageLocation = $(this).attr("href");

  //Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  //Show the overlay.
  $overlay.show();

  //show buttons
  $leftArrow.show();
  $rightArrow.show();

  //Get child's alt attribute and set caption
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
});



//When overlay is clicked
$overlay.click(function(){
  //Hide the overlay
  $overlay.hide();
});

I have build the lightbox. You click on a picture and the lightbox comes out. When it comes out it has the two buttons in question, but I can't seem to make them work. I can use a jquery plugin, but I would rather learn how to do this myself without one. I

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Carlos,

I found a few older questions about this that might help you out.

https://teamtreehouse.com/community/jquery-help-in-understanding-steps-needed-to-create-a-next-button-for-a-lightbox

https://teamtreehouse.com/community/how-would-i-add-a-next-button-to-this-lightbox-to-show-the-next-image-in-my-gallery

Carlos Arroyo
.a{fill-rule:evenodd;}techdegree seal-36
Carlos Arroyo
Front End Web Development Techdegree Graduate 15,431 Points

That help out a lot. Thank you.