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 An Phung
.a{fill-rule:evenodd;}techdegree
An Phung
iOS Development Techdegree Student 3,913 Points

Why my caption is on top of the image even I follow the order as same as the lecture

Why my caption is on top of the image even I follow the order as same as the lecture ?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi An,

Can you please post your code?

3 Answers

An Phung
seal-mask
.a{fill-rule:evenodd;}techdegree
An Phung
iOS Development Techdegree Student 3,913 Points
An Phung
.a{fill-rule:evenodd;}techdegree
An Phung
iOS Development Techdegree Student 3,913 Points

Hi This is my script

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

    $overlay.append($image);
    $overlay.append($caption);  
    $("body").append($overlay);

        $("#gallery a").click(function(event){
    event.preventDefault();
    var imageLocation = $(this).attr("href");
    $image.attr("src",imageLocation);
    $overlay.show();
    var captionText= $(this).children("img").attr("alt");
    $caption.text(captionText);
         });

        $overlay.click(function(){
    $(this).hide();
        });
An Phung
seal-mask
.a{fill-rule:evenodd;}techdegree
An Phung
iOS Development Techdegree Student 3,913 Points
An Phung
.a{fill-rule:evenodd;}techdegree
An Phung
iOS Development Techdegree Student 3,913 Points

<!doctype html> <html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div id="gallery">
    <a href="images/home_background.jpg"><img src="images/home_background.jpg" alt="background" width="200"></a>
    <a href="images/designer_1.jpeg"><img src="images/designer_1.jpeg" alt="designer1" width="200"></a>
    <a href="images/designer_2.jpeg"><img src="images/designer_2.jpeg" alt="designer2" width="200"></a>
    </div>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js">
    </script>
    <script src="script.js" type="text/javascript"></script>
</body>

</html>

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi An,

I copy / pasted your code into my local development environment and caption appears below the image for me. When I use your code and my images, this is what I get - only noticeable change that I made was to add this line of css:

#overlay p {
  color: white;
}

img gallery

Can you please make a CodePen or post a link to your Workspace preview page? If you post a link from your preview page, remove any personal information you don't want shared on the forum.