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

Posted April 3, 2015 3:39am by

adding caption text in jQuery

I'm creating a lightbox using jQuery. I've created an overlay, and when an image is clicked it is appended to the overlay. I'm also trying to append the image's alt text when it is clicked but not having any luck. Can't see where I'm going wrong. Any suggestions would be greatly appreciated. Here's my code

<div class="grid-container imageGallery">
        <div class="grid-3">
            <a href="img/item-01.png">
                <div class='image'>
                    <img class="feat-img" src="img/item-01.png" alt='Image by Bob'/>
                    <div class='text'></div>
                </div>
            </a>
            <p class='caption'>Caption</p>
        </div>
        <div class="grid-3">
            <a href="img/item-02.png"><div class='image'>
                <img class="feat-img" src="img/item-02.png" alt='Image by Jim'/>
                    <div class='text'></div>
            </div></a>
            <p class='caption'>Caption</p>
        </div>
        <div class="grid-3">
            <a href="img/item-03.png"><div class='image'>
                <img class="feat-img" src="img/item-03.png" alt='Image by Johnny'/>
                    <div class='text'></div>
            </div></a>
            <p class='caption'>Caption</p>
        </div>
        <div class="grid-3">
            <a href="img/item-04.png"><div class='image'>
                <img class="feat-img" src="img/item-04.png" alt='Image by Dave'/>
                    <div class='text'></div>
            </div></a>
            <p class='caption'>Caption</p>
        </div>
    </div>

$(document).ready(function(){
//Problem: When user clicks on an image they are taken to a dead end.
//Solution: Create an overlay with the image centered on it - Lightbox

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

    //Add an image to overlay
    $lightbox.append($lightboxImage);
    //Add a caption to the overlay
    $lightbox.append($caption);
    //Add overlay
    $('body').append($lightbox);
    //Capture the click event on a link to an image
    $('.imageGallery a').click(function(event){
        event.preventDefault();
        var imageLocation = $(this).attr('href');
        // Update the overlay with the image that is clicked,
        $lightboxImage.attr('src', imageLocation);
        // Show the overlay.
        $lightbox.show();



        //1.3 Get the image alt attribute and set caption.
        var captionText = $(this).children('img').attr('alt');
        $caption.text(captionText);
    });
    //When the overlay is clicked
        //Hide the overlay.
    $lightbox.click(function(){
        $lightbox.hide();
    });
});

2 Answers

April 4, 2015 3:26am

Gabriel, I created a mock test page with some sample png files and your code as it is here (except for with children() replaced with find() of course) and it works perfectly. The other problem actually does seem to lie within your CSS, because you have some margins set to where the caption isn't visible. I changed the margin-top property in the ".lightbox img" selector to be 5% instead of 10% and I was able to see the caption. See if changing that margin-top property to 5% allows you to see the caption.

April 4, 2015 3:45am

Marcus thanks for the margin suggestion. That worked. I'm trying to append a button to the lightbox now, using pseudo classes in CSS. Again, it's not showing. If you've got any thoughts, that'd be cool. Otherwise thanks so much for you help!

#nav-icon1 {
  width: 100px;
  height: 100px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  margin-top: 1.5%;
  margin-right: 3%;
  z-index: 100;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #000;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  z-index: 100;
}

#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 7px;
}

#nav-icon1 span:nth-child(3) {
  top: 14px;
}

$(document).ready(function(){
//Problem: When user clicks on an image they are taken to a dead end.
//Solution: Create an overlay with the image centered on it - Lightbox

    var $lightbox = $('<div class ="lightbox"></div>');
    var $lightboxImage = $('<img>');
    var $button = $('<div id="nav-icon1"><span></span><span></span><span></span></div>')
    var $caption = $('<p></p>');

    $lightbox.append($button);
    //Add an image to overlay
    $lightbox.append($lightboxImage);
    //Add a caption to the overlay
    $lightbox.append($caption);
    //Add overlay
    $('body').append($lightbox);
    //Capture the click event on a link to an image
    $('.imageGallery a').click(function(event){
        event.preventDefault();
        var imageLocation = $(this).attr('href');
        // Update the overlay with the image that is clicked,
        $lightboxImage.attr('src', imageLocation);
        // Show the overlay.
        $lightbox.show();



        //1.3 Get the image alt attribute and set caption.
        var captionText = $(this).find('img').attr('alt');
        $caption.text(captionText);
    });
    //When the overlay is clicked
        //Hide the overlay.
    $lightbox.click(function(){
        $lightbox.hide();
    });
});

April 4, 2015 6:31am

A lot of elements require content to be present in order to be visible: most notably in your code, the div and span tags. If there is no content in there, there is nothing to show. What is your goal with this button?

April 4, 2015 10:50pm

Marcus, The button is appended now and I can see it. The goal is to have previous and next buttons. Then to be able to click on them to move to the previous or next image in the image gallery. This is all while staying in the lightbox.

April 3, 2015 5:32am

Hi Gabriel,

It might not be working because .children() only goes 1 level down. i.e. direct children

Your img is 2 levels down. Try using .find() instead which will search all descendants.

.children() worked in the jquery basics course because the img was a direct child of the link.

April 3, 2015 5:43am

Ahhh good catch, Jason!

April 3, 2015 7:21am

Hi Jason,

Sadly that doesn't work either. I'll have to just keep at it.

Cheers

April 3, 2015 4:51pm

If that didn't solve it, perhaps you could post your CSS and we can see what's going on there. It's hard to tell what might be going on.

April 4, 2015 2:18am

Hi Marcus,

Here's my CSS. Thanks for your help.

/* Page Styles
================================ */
@font-face { 
  font-family: 'Born';
  src: url('Born.otf'); 
} 

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font: normal 1em/1.9 'Lato', sans-serif;
    color: #222;
}
img {
    /*padding: 5px;*/
}

/* Main Layout Styles
================================ */

.main-header {
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(10, 10, 10, 0.9);
}
.container-1{
    display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}
.main-logo {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5em;
}
.main-logo a, 
.main-nav a {
    display: block;
    text-align: center;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px 20px;
    font-family: 'Born', sans-serif;
}

.main-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.image {
        text-align: center;
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }

    .text {
    max-width: 100%;
    max-height: 100%;
    background: rgba(121, 151, 241, 0.7);
    position: absolute;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.text:hover {
    opacity: 1;
}

.imageText {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;
    padding: 0 15%;
    font-size: 2em;
    color: white;
    font-family: 'Lato', sans-serif;
    text-align: center;
     background: rgba(121, 151, 241, 0.7);
}

#storyText {
    padding: 0 5%;
}

form {
    width:300px;
    margin: 0 auto;
    /*background: red;*/
}

.search {
    padding:8px 15px;
    background:rgba(250, 250, 250, 0.7);
    border:0px solid #dbdbdb;
}

.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #207cca;
    background-color:#207cca;
    color:#fafafa;
}
.lightbox {
    background: rgba(0,0,0, 0.6);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    text-align: center;
}

.lightbox img {
    width: 40%;
    margin-top: 10%;
}

.lightbox p {
    color: white;
}

grid-container {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
}

.grid-container > [class^="grid-3"],
 .grid-container > [class^="grid-4"] {
        padding-top: 30px;
    }

img {
    width: 100%;
    position: relative;
}

April 4, 2015 2:34am

It looks like you're missing the selector for a block of CSS above your ".lightbox img" selector. I'm assuming this is meant for ".lightbox" and that might be why you aren't seeing anything unless something got lost in the pasting of the code.

But, still, take Jason's advice and change the children() method to find() method if you haven't done so yet, as well.

April 4, 2015 2:39am

Hi Marcus,

I've edited the code pasted here, it did in fact get lost. find() isn't working either.

April 4, 2015 2:51am

So I've just discovered that if I remove

$lightbox.append($lightboxImage);

Then the caption appears. Can't work out why that might be...

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Gabriel Ward

Gabriel Ward

adding caption text in jQuery

2 Answers

Marcus Parsons

Marcus Parsons

Gabriel Ward

Gabriel Ward

Marcus Parsons

Marcus Parsons

Gabriel Ward

Gabriel Ward

Jason Anello

Jason Anello

Marcus Parsons

Marcus Parsons

Gabriel Ward

Gabriel Ward

Marcus Parsons

Marcus Parsons

Gabriel Ward

Gabriel Ward

Marcus Parsons

Marcus Parsons

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward