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

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

How to make an overlay (of an lightbox) for a page that has a scroll?

Hi, What about if the image gallery in this video (JavaScript > jQuery Basics > Perform Part 2) had more images. Now it has only 3 lines of images. But what about if it had let's say 20 lines of images (this means that it would be a scrollable page).

What would happen is that the overlay would cover only the upper section of the page (the size of the view port height) but when scrolling you would bump to a white (no overlay) page.

So how to solve that? How to do a decent (covering the whole page, not just the view port section of the page) overlay for a scrollable page?

In case you do not have the time to watch the video, its all about making a lightbox with Java Script. Here is the code that we are using in the video:

JavaScript:

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

    // Lightbox for images 

    var $overlay = $('<div id="overlay"></div>');
    var $image = $('<img>');
    var $overlayInnerContent = $('<div id="overlay-inner-content"></div>');

    // Append image to overlay
    $overlay.append($image);
    // Append overlay to body
    $('body').append($overlay);

    // When click on an image
    $("#imageGallery a").click(function(event){
        // Stop default behaviour (opening an image on a new page)
        event.preventDefault();
        // Grab href from the image you've clicked on
        var imageLocation = $(this).attr('href');
        // Set the grabbed href as a src of a big image
        $image.attr('src', imageLocation);
        // Show overlay (the image is shown together with it because it was appended to it before)
        $overlay.show();
    });

    // When click on overlay
    $overlay.click(function(){
        // Hide overlay
        $overlay.hide();
    });

});

HTML (with an id image Gallery):

<div id="imageGallery" class="grid-4">
        <a href="<?php the_field( 'image' ); ?>">
            <img src="<?php the_field( 'image' ); ?>" alt="<?php the_title(); ?> Project Screenshot">
        </a>
        <p><?php the_field( 'description' ); ?></p>
    </div>

CSS (just the one needed for the lightbox):

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


#overlay img {
    margin-top: 2.5%;
    width: 40%;
}

2 Answers

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

Hi Maja,

I must confess I've not had time to look at the tutorial but I have quickly thrown together a little demo of how this can be achieved by setting the position value to fixed, you will need to click the link that says 'show overlay' to display the overlay.

When an element has fixed positioning it is positioned relative to the browser window and so will not move even when the window is scrolled. Try changing the value to absolute on the demo and see what happens. :)

Here's the code from the demo...

  <div class="overlay"></div>

  <h3>Begin...</h3>
  <a class="toggle" href="#">Show overlay</a>

and CSS...

.overlay {
  position: fixed;
  display: none;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.3;
}
Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, Richard, I appreciate your help. I have changed the #overlay definition in my CSS with yours. But when I do that it does not show the layout at all. Could be that I'm doing something wrong though, as it is early in the morning in my country ...

So I have deleted this from my code:

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

And put your .overlay definition in it (just changing it from class to id):

#overlay {
  position: fixed;
  display: none;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.3;
}

You gave me a good idea to actually append my code (JS, CSS, HTML) to my question. please have a look at it above).

Henrique Machuca
Henrique Machuca
5,611 Points
Henrique Machuca
Henrique Machuca
5,611 Points

I did the same as you!

But now, I´m having problem to display my image. No matter the size of it, since the overlay is fixed, the image size when I click it expands to the entire screen.

Any suggestions for it?

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, Henrique, It's been a while since I was dealing with this issue ... all I remember is that I didn't find the solution.