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

HTML jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Robert James
Robert James
20,491 Points
Posted by Robert James
Robert James
20,491 Points

Problem with overlay

I have used this lightbox in one of my own projects.

I am having one issue with it though. My page consists of a main nav and then a sub nav different categories of artwork.

When i click the thumbnail of images the light box works perfectly.

But when i click the nav to change categories to view another set of images there is then an overlay over this page, which only goes when clicked.

The jQuery is obviously targeting links on the page, but i only want it to target the img links. Is there a way i can avoid the nav links also being targeted.

Thanks

Rob

2 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

So i used your code and i think i found the error. You forgot to hide the overlay first. So in your css add display:none; to your #overlay. It should fix it.

Robert James
Robert James
20,491 Points
Robert James
Robert James
20,491 Points

Yes this has fixed it.

So simple, thanks so much

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Can you post your html here? One way is to use the parent id like in the course. Give the ul of the thumbnails gallery an id and use it. ex $(#galleryUl a).click...

Robert James
Robert James
20,491 Points
Robert James
Robert James
20,491 Points 
<div id="wrap" class="grey">
        <div id="content_area" class="group">
            <nav class="side_col">
            <ul>
                <li><a href="landscapes.html">Landscapes</a></li>
                <li><a href="seascape.html">Seascape</a></li>
                <li><a href="abstract.html">Abstract</a></li>
                <li><a href="sports.html">Sports</a></li>
                <li><a href="penandwash.html">Pen and Wash</a></li>
                <li><a href="portraits.html">Portraits</a></li>
            </ul>
            </nav>
            <div id="imgGallery" class="content_col">
            <ul>
                <li><a href="images/paintings/sports/sp_img2.jpg"><img src="images/paintings/sports/sp_img2.jpg" height="150" alt="Surfer, 30 x 20, &pound;260"></a></li>
                <li><a href="images/paintings/sports/sp_img7.jpg"><img src="images/paintings/sports/sp_img7.jpg" height="150" alt="Shane Williams try vs France, 22 x 18, &pound;350"></a></li>
                <li><a href="images/paintings/sports/sp_img6.jpg"><img src="images/paintings/sports/sp_img6.jpg" height="150" alt="Bradley Davies try v Ulster, 24 x 20, &pound;380"></a></li>
            </ul>

            </div>
        </div><!--END OF CONTENT_AREA-->

That is a snippet of the html

Robert James
Robert James
20,491 Points
Robert James
Robert James
20,491 Points

Sorry i didnt realise that the comment had turned out like this, first time i have posted code within a forum so it has been edited properly above.

Hope this is ok and you can help

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Great, and your jquery?

Robert James
Robert James
20,491 Points
Robert James
Robert James
20,491 Points 
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
$("#imgGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  //Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  //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();
});