Some of the JavaScript lightbox effects that I've seen position the lightbox relative to the viewport, so that when you scroll the page you will still see the lightbox.

The other kind are the ones that are positioned relative to the page contents. If you scroll a page containing one of these, the lightbox moves with the rest of the page.

I don't know what this second type is called (or if there is even a term for this behaviour).

I've looked at FancyBox and SimpleModal, but as far as I know, these are positioned relative to the viewport only.

What jQuery plugin allows lightboxes that scroll with the page?

Some of the JavaScript lightbox effects that I've seen position the lightbox relative to the viewport, so that when you scroll the page you will still see the lightbox.

The other kind are the ones that are positioned relative to the page contents. If you scroll a page containing one of these, the lightbox moves with the rest of the page.

I don't know what this second type is called (or if there is even a term for this behaviour).

I've looked at FancyBox and SimpleModal, but as far as I know, these are positioned relative to the viewport only.

What jQuery plugin allows lightboxes that scroll with the page?

• javascript
• jquery
• jquery-plugins
• lightbox

• Whatever you do, please ensure that it still works OK if the viewport is smaller than the size you choose for the lightbox. Lately I've encountered several photo-display sites which use lightboxes which pop up at a large fixed size, such that some of the image, and even the close-button for the lightbox, spill over the viewport (and are entirely unreachable if the lightbox is fixed-positioned, which effectively disables scroll bars). And unlike the browser's own image UI, there is often no way to zoom or scroll the image, so they are less useful, for oversize images, than what they replace. – Kevin Reid Commented Jan 22, 2010 at 1:31

4 Answers 4

that would actually be up to css.

lightboxes are just divs that are positioned absolutely (they move with the page) or fixed (they are positioned relative to the browser window.

Basic Lightbox HTML

<div class="lightbox_wrapper">
     <div class="lightbox">
         the lightbox content loaded by ajax
    </div>
</div>

Basic CSS for a scrolling lightbox

div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:absolute; }

Basic CSS for a viewport fixed lightbox

div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed; }

Now I believe that most of the mon lightboxes make you include their css, or they add it to the DOM on load. If they as you to include a css file then just look for the class that declares the properties of a lightbox and change the position method. otherwise you'll have to add the values to your own css and declare them as important like this.

CSS property marked as important

div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed !important; }

as for another kind of lightbox, I haven't seen one so you'll have to explain more in a ment below...

Robert Hurst is correct in theory, but if you like FancyBox, it supports both modes via configuration

If you look at bottom of the http://fancybox/howto page, it has an option

centerOnScroll     If true, content is centered when user scrolls page

here is an example of how you would invoke it:

jQuery(document).ready(function(){
    $('#a').fancybox({
      centerOnScroll: false
    });
});

edit your lightbox CSS as below

#lightbox {
  position: fixed;
}

to center your lightbox popup to the window edit the script as below

top = ($window.height()- YOUR_LIGHT_BOX_HIGHT) / 2;

I'm used Lightbox v2.51 and worked well. the only issue is that yet the background is scrolling while the pop up is fixed and centred.

I appreciate that this is an old question, however, I have seen that the JS gurus at designmodo have implemented a version of this very well:

http://designmodo./startup/#ponent-grid

Take a look at the showLargeImage function within the all.js file.