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

WordPress WordPress Theme Development Custom Post Type Templates in WordPress The Portfolio Homepage

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Lightbox/Overlay and Wordpress

I've built a portfolio page like the one Zac illustrates in this video. To add to it, I'm trying to build in a lightbox as taught in the in the jQuery basics course. I've got as far as displaying the overlay when I click on an image on the portfolio page, but can't get the clicked image to show. I'd be grateful for any advice on how to get the clicked image to show, or pointed to documentation that might help to figure it out. Below is my jQuery code. I think the problem is that the href in the $imageLocation variable is not the correct attribute. Thanks for any help

jQuery(document).ready(function($) {

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

    $overlay.append($image);
    $('body').append($overlay);

    $('#portfolioGallery a').click(function(event){
        event.preventDefault();
        //'href' is not the correct attr?
        var imageLocation = $(this).attr('href');
        $image.attr('src', 'imageLocation');
        $overlay.show();
    });

});