Question

For a new project, I need to make an scroable lightbox like one that open after clicking any image on pinterest. Requirements are:

1. Lightbox must support HTML contents.
2. Contents might be more that monitor screen (Fixed width but no limit for height).
3. Lightbox should not have its independent scrollbars but must use browser’s scrollbar like pinterest.
4. When light box is open, scrolling events should scroll only light box but not the background.
5. Only Pure Javascript and/or JQuery and/or HTML5/CSS3 solution is acceptable.

I went through quite a few lightbox JS and even JQuery plugins. It seems most support single screen lightbox.

Does some one know any available JS/JQuery plugin to achieve above requirements. If not, is there any tutorials which could help making custom plugin to achieve above requirements.

Thanks in advance,

Kapil.

Answer 1

What you are looking is possible only through HTML/CSS. Use of any Javascript library is just needed to make it easy and JS/JS Lib depends on personal taste.

In terms of main logic, in pintrest, scrolling feature is achieved through CSS property ‘overflow-y: scroll’. For overlay (lightbox background), no width/height is defined but CSS properties (top:0;bottom:0;left:0;right:0;) will do the magic.

With above CSS properties (obviously few others for design), scroll feature for lightbox will appear. However you will notice two vertical scrollbars; one for body and other for lightbox. Here the trick is to make body scrollbar disappear. This can be done by giving CSS property (‘overflow: hidden’) to body when lightbox opens and remove it when it close, which can be done through JS/JS-lib easily. Thus we will have two scrollbars but displaying only one at a time gets the required effect.

Hope this helps.