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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Posted by Fatih Hamzah
Fatih Hamzah
8,666 Points

Only the first caption that appears, other image use the first caption. Why?

I did what teacher said, it works, the caption appear. Although my version is not the alt attribute, but appendTo an h5 tag into the overlay..

The problem is that other images that I click on are using the first h5/caption, not each h5 that they have.

Here is the full code of my JS, n part of my HTML: http://codepen.io/fatihamzah/pen/XKOVdg

In short, here is the code:

This is the first caption/h5 that appears in every image (each image should appears each of its own h5/caption):

Indonesia Relations NEWSPAPER DESIGN

//this add the h5 into th overlay

var title = $("#picture").children("h5");
$(title).appendTo($overlay);

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

:point_right: Your selector is not using "this".

With a fixed selector, you'll always pick up the same element. Also, you probably don't want to move that element, but just copy the HTML content similar to how you copy the href attribute for the image:

    // get the HTML from the element following this one (the h5)
    var title = $(this).next().html();
    $text.html(title);  // copy it to the h5 in the overlay
Fatih Hamzah
Fatih Hamzah
8,666 Points

Hey it works!

I wonder why I can't use appendTo, even if I change the selector to be 'this' like this:

var title = $("this").next();

$(title).appendTo($overlay);

It only created an h5 tag inside the overlay without moving the text inside the h5.. any thoughts?

Sergey Blokhin
Sergey Blokhin
9,612 Points
Sergey Blokhin
Sergey Blokhin
9,612 Points

Hello! So if I already have a <p></p> with a text how do I assign in to the lightbox caption?

<div id="lunch" class="item-1 item"><a href="img/maindish/pitanm.jpg"> <img class="picture" src="img/maindish/pitanm.jpg" alt=""> <p>Ramen 650 YEN</p> </a></div>