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

Maurits Pallesen
Maurits Pallesen
9,770 Points
Posted by Maurits Pallesen
Maurits Pallesen
9,770 Points

Jquery lightbox image location error

Hello everyone. This might be a simple error that i for some reason can't seem to find. I've spent more time searching for it than i'd like to admit.... With this code, when the overlay is shown and the image is supposed to show, i get the little image you get when there's a refference error. The captionText works, though the images are not shown.

my html:

            <div class="col-12 gallery">
                <div class="col-12">
                    <a href="img_1.png" class="col-4"><img src="img_1.jpg" alt="Great design"></a>
                    <a href="img_2.png" class="col-4"><img src="img_2.jpg" alt="Bughatti veyron Super Sport" id="bug"></a>
                    <a href="img_3.png" class="col-4"><img src="img_3.jpg" alt="Anonymous"></a>
                </div>
                <div class="col-12">
                    <a href="img_4.png" class="col-4"><img src="img_4.jpg" alt="Close to the roof of the world"></a>
                    <a href="img_5.png" class="col-4"><img src="img_5.jpg" alt="Amazonas"></a>
                    <a href="img_6.png" class="col-4"><img src="img_6.jpg" alt="Amazing wallpaper"></a>
                </div>
                <div class="col-12">
                    <a href="img_7.png" class="col-4"><img src="img_7.jpg" alt="Great Barrier Reef"></a>
                    <a href="img_8.png" class="col-4"><img src="img_8.jpg" alt="Something awesome"></a>
                    <a href="img_9.png" class="col-4"><img src="img_9.jpg" alt="Jesus statue in Rio de Janeiro"></a>
                </div>
            </div>

my jquery:

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

//An image to overlay
$overlay.append($image);

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

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

//Capture the click event on a link to an image
$(".gallery a").click(function(event){
  event.preventDefault();

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

  //Show the overlay.
  $overlay.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();
});

Thank you in advance.

1 Answer

Andrew Cousineau
Andrew Cousineau
17,320 Points
Andrew Cousineau
Andrew Cousineau
17,320 Points

Your code does seem correct. I compared it with my own Overlay Code. My guess is the path to your images is not correct. Unless your images are in the same directory as your html file, your html file will not be able to find them. Are your images per chance in an images directory? In which case, you need to specify the path to the images relative to your html file.

<!-- In the case your images are in a folder titled "img" -->
<a href="img/img_1.png" class="col-4"><img src="img/img_1.jpg" alt="Great design"></a>