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 raykennedy2
raykennedy2
11,391 Points

lightbox wont work

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tk | Photography</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header>
        <div id="logo">
            <a href="index.html"><h1>TK</h1></a>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <section>
            <ul id="gallery">
                <li>
                    <a href="img/PIC54.jpg">
                        <img src="img/PIC54.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC51.jpg">
                        <img src="img/PIC51.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC53.jpg">
                        <img src="img/PIC53.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC56.jpg">
                        <img src="img/PIC56.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC55.jpg">
                        <img src="img/PIC55.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC58.jpg">
                        <img src="img/PIC58.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC47.jpg">
                        <img src="img/PIC47.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC28.jpg">
                        <img src="img/PIC28.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC48.jpg">
                        <img src="img/PIC48.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC11.jpg">
                        <img src="img/PIC11.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC19.jpg">
                        <img src="img/PIC19.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC23.jpg">
                        <img src="img/PIC23.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC50.jpg">
                        <img src="img/PIC50.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC49.jpg">
                        <img src="img/PIC49.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="img/PIC6.jpg">
                        <img src="img/PIC6.jpg" alt="">
                    </a>
                </li>
            </ul>
            <div id="overlay"></div>
            <script
                src="https://code.jquery.com/jquery-3.1.1.js"
                integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
                crossorigin="anonymous">
            </script>
            <script type="text/javascript" src="js/app.js"></script>
        </section>
    </div>
    <footer>
        <p>&copy; 2016 .</p>
    </footer>

</body>
</html>

/* 
    lightbox
*/

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

var $image = $('#gallery img');

//an aimage to overlay
$overlay.append($image);

//add overlay
$('<body>').append($overlay);

//Capture click event on a link to an image
$('#gallery a').click(function(event) {
    event.preventDefault();
    var imageLocation = $(this).attr('href');
    //Update overlay with th eimage linked in the link
    $image.attr("src", imageLocation);
    //Show the overlay
    $overlay.show();
});

//When overlay is clicked
$overlay.click(function() {
    //Hide the overlay
    $overlay.hide();
}); 

#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

#overlay img {
 margin-top: 10%; 
}

the lightbox wont work, as soon as i load the page all the photos disappear off the page, no errors are being thrown up in the console, if i comment out all the js then the html and css works as it should, i've tried commenting out parts of the JS line by line but as soon as it gets to $overlay.append($image); it breaks,?????

2 Answers

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Ray,

I notice that when appending your $overlay to the body, you are using ("<body>"). If you remove the angle brackets, it may solve your issue.

$("body").append($overlay);
raykennedy2
raykennedy2
11,391 Points

no it still wont work

Micah Murray
Micah Murray
6,913 Points
Micah Murray
Micah Murray
6,913 Points

I made a few changes to your code to make it work. Firstly, put the jquery script tag at the top at the page. Next, don't create a new html element with id overlay you already have one in the document body. You will however need to create a new image element to append to overlay. The code you used for that is not clean. Next, you don't need to append overlay to the body because its already there remember. finally, wrap your code in jquery document ready block. here are my changes.

$(document).ready(function(){

    var $overlay = $('#overlay');

    var $image = $('<img>');

    //an aimage to overlay
    $overlay.append($image);

    //add overlay
    //$('<body>').append(overlay);

    //Capture click event on a link to an image
    $('#gallery a').click(function(event) {
        event.preventDefault();
        var imageLocation = $(this).attr('href');
        //Update overlay with th eimage linked in the link
        $image.attr("src", imageLocation);
        //Show the overlay
        $overlay.show();
    });

    //When overlay is clicked
    $overlay.click(function() {
        //Hide the overlay
        $overlay.hide();
    });         


});
raykennedy2
raykennedy2
11,391 Points

brilliant that worked thank you, which code isn't clean?the JS?

Micah Murray
Micah Murray
6,913 Points

This line of code "var $image = $('#gallery img'); ". It looks like you're trying to take an element from one part of the DOM and add it somewhere else. It might have an undesired affect on how the page displays. Not to mention there are a lot of images nested in #gallery, which one will you get or will you get any at all seeing IMG is also nested in <li> and <a> tags. Its cleaner to give #overlay its own image element.