jQuery lightbox plugin that scrolls with the page

Question

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?

Answer 1

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 common 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 comment below...

Answer 2

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