LQuery lightbox plugin that scrolls from the page

Question

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

Another view are those that are relative to the contents of the page. If you scroll through a page containing one of them, the lightbox moves with the rest of the page.

I do not know how this second type is called (or if there is even a term for this behavior).

I looked at FancyBox and SimpleModal , but as far as I know, they are located only relative to the viewport.

Which jQuery plugin allows you to scroll through pages using lightboxes?

Answer 1

what really would be before css.

Lightboxes are only those divs that are absolutely located (they move with the page) or fixed (they are located relative to the browser window.

Basic HTML Lightbox

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

Basic CSS for scrolling lightboxes

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 fixed lightbox in view mode

div.lightbox {height: 250px; : 250px; : ; : ; }
div.lightbox_wrapper {height: 250px; : 100%; : 200px; left: 0 : ;}

, css, DOM . , css, , , . css , .

CSS,

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

, , ...

Answer 2

, , FancyBox,

http://fancybox.net/howto,

centerOnScroll     true, ,

, :

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

Answer 3

CSS

#lightbox {
  position: fixed;
}

, script,

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

Lightbox v2.51 . , , .

Answer 4

, , , , JS designmodo :

http://designmodo.com/startup/#component-grid

Take a look at the showLargeImage function in all.js.