Usage Examples

You can bind lightbox to any element on your page. The lightbox can pop-up on images, links, paragraphs, random <div> tags etc...

Load Images From Alternative Locations

Here everything is the same as in the previous example, except one thing: add data-lbxp-img="" attribute with a link to the desired location. And liteBox.pro library will load image from there. This is a very good and recommended practice if you want to use different image sizes for thumbnail images and for the big images, which open in the lightbox.

<div class="gallery">
HTML
<div class="gallery">
	<img src="img/01.jpg" data-lbxp-img="img/big/01.jpg">
	<img src="img/02.jpg" data-lbxp-img="img/big/02.jpg">
	<img src="img/03.jpg" data-lbxp-img="img/big/03.jpg">
	<img src="img/04.jpg" data-lbxp-img="img/big/04.jpg">
</div>
JavaScript
new LiteBoxPro('.gallery');

Multiple Galleries on One Page

You can specify as many image galleries within one page as you wish. But good thing is that you don’t have to initialize LiteBoxPro() object individually for each of your galleries. You can use a common selector for all of your gallery elements. For example: the same class name for all galleries like .gallery which we used in this example. liteBox.pro lighbox will automatically handle them as multiple individual galleries.

Click the images below to chech the number of images in each gallery sequence.

<div class="gallery">
<div class="gallery">
<div class="gallery">
HTML
<div class="gallery">
	<img src="img/01.jpg" data-lbxp>
	<img src="img/02.jpg" data-lbxp>
	<img src="img/03.jpg" data-lbxp>
	<img src="img/04.jpg" data-lbxp>
</div>
<div class="gallery">
	<img src="img/01.jpg" data-lbxp>
	<img src="img/02.jpg" data-lbxp>
</div>
<div class="gallery">
	<img src="img/01.jpg" data-lbxp>
	<img src="img/02.jpg" data-lbxp>
	<img src="img/03.jpg" data-lbxp>
</div>
JavaScript
new LiteBoxPro('.gallery');

Multiple Galleries Shown As One

Unlike the previous example here we want to merge all gallery sequences into one big gallery. To do that just add merged_gallery: true to the options of LiteBoxPro() object.

Click the images below to chech the number of images in the gallery sequence.

<div class="gallery">
<div class="gallery">
<div class="gallery">
HTML
<div class="gallery">
	<img src="img/01.jpg" data-lbxp>
	<img src="img/02.jpg" data-lbxp>
	<img src="img/03.jpg" data-lbxp>
	<img src="img/04.jpg" data-lbxp>
</div>
<div class="gallery">
	<img src="img/03.jpg" data-lbxp>
	<img src="img/04.jpg" data-lbxp>
</div>
<div class="gallery">
	<img src="img/02.jpg" data-lbxp>
	<img src="img/03.jpg" data-lbxp>
	<img src="img/04.jpg" data-lbxp>
</div>
JavaScript
new LiteBoxPro({
	dom_element: '.gallery',
	merged_gallery: true
});

Multiple Galleries With Individual Styles

Let’s imagine the scenario when you have multiple gallery sequences in one page and want to setup a unique visual style for each of them. You can easily do that by inializing LiteBoxPro() object multiple times with different options for each gallery. All styling options you can find in API Docs.

Click the images below to see the difference in style between the galleries.

<div id="red">
<div id="green">
<div id="blue">
HTML
<div id="red">
	<img src="img/01.jpg" data-lbxp>
	<img src="img/02.jpg" data-lbxp>
	<img src="img/03.jpg" data-lbxp>
	<img src="img/04.jpg" data-lbxp>
</div>
<div id="green">
	<img src="img/01.jpg" data-lbxp>
	<img src="img/02.jpg" data-lbxp>
</div>
<div id="blue">
	<img src="img/01.jpg" data-lbxp>
	<img src="img/02.jpg" data-lbxp>
	<img src="img/03.jpg" data-lbxp>
</div>
JavaScript
new LiteBoxPro({
	dom_element: '#red',
	theme_color: '#FF0000'
});
new LiteBoxPro({
	dom_element: '#green',
	theme_color: 'rgba(12, 204, 66, 1)'
});
new LiteBoxPro({
	dom_element: '#blue',
	theme_color: 'deepskyblue'
});

Sign up for free* updates

The liteBox.pro library is being constantly developed.
Sign up with purchase e-mail to download updates as they appear:

* If you buy the liteBox.pro library and subscribe with the same e-mail which you used for purchase, then you will receive personal download links for the new updates as soon as they appear.
This policy may change in future.

The subscription is successful, but needs to be confirmed.

Please, check your e-mail and click the confirmation link in the letter we sent. It may take a few minutes for the letter to come.

If you close this message or continue using this website, then you automatically accept our privacy policy. If you don't agree, please, leave immediately.