随页面滚动的jQuery灯箱插件

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 }

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 }

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 }

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

Answer 2

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.

Answer 3

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

Answer 4

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.com/startup/#component-grid

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