Usage Examples

A Simple Gallery Bound to <img> Tags

For the most simple approach add data-lbxp attribute to <img> tags in your HTML. Then in your JavaScript code specify parent object containing your grouped images using a CSS selector. In this example we used the .gallery class name for this purpose. After you do so the liteBox.pro script will look for any src or href links next to the data-lbxp attribute and load lightbox image from that location.

Find out what other gallery declarations you can use instead of CSS selectors: LiteBoxPro() object.

<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>

JavaScript

new LiteBoxPro('.gallery');

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

Lightbox Bound to Text Links

As it was shown in the examples above it's very easy to initialize liteBox.pro gallery. You just need to add data-lbxp attributes and specify the containing element. On top of that, as you may already understood, you can bind lightbox not only to the <img> tags, but also to links — the <a> tags. In this case the liteBox.pro lightbox will look for href attributes and load images from those locations.

<div class="my-links">
	<ul>
		<li><a href="img/01.jpg" data-lbxp>Girls</a></li>
		<li><a href="img/02.jpg" data-lbxp>Elephant</a></li>
		<li><a href="img/03.jpg" data-lbxp>Deer</a></li>
		<li><a href="img/04.jpg" data-lbxp>Fox</a></li>
	</ul>
	<ul>
		<li><a href="img/05.jpg" data-lbxp>Lake</a></li>
		<li><a href="img/06.jpg" data-lbxp>Canyons</a></li>
		<li><a href="img/07.jpg" data-lbxp>Forest</a></li>
		<li><a href="img/08.jpg" data-lbxp>Mountains</a></li>
	</ul>
</div>

new LiteBoxPro('.my-links');

Lightbox Bound to Any Elements

And finally, yes, you can initialize liteBox.pro lightbox on any element(s) on your page. The tag doesn't matter if you have data-lbxp or data-lbxp-img="" attribute in it. While data-lbxp attribute works only with <img> and <a> tags. The data-lbxp-img="" can be placed wherever you want. You can use both attributes withing one page or gallery.

<article>

What Is UX/UI Design

Whether you press buttons on arithmometer, turn a handle of a grindstone or swipe on a smartphone screen — all these are the interfaces you use to interact with machines. And interfaces not necessary must be digital. It’s just the word that became more popular in digital era.

The aim of UX/UI designer is to lead user to some logic milestone in the interface. And make user to achieve his goal.

Button

<div>

HTML

<article>
	<h1 data-lbxp-img="img/01.jpg">What Is UX/UI Design</h1>

	<p>Whether you press buttons on arithmometer, turn a handle of a grindstone or swipe on a smartphone screen — all these are the <a data-lbxp href="img/02.jpg">interfaces</a> you use to interact with machines. And interfaces not necessary must be digital. It’s just the word that became more popular in digital era.</p>

	<img data-lbxp src="img/03.jpg">

	<p>The aim of <a data-lbxp href="img/04.jpg">UX/UI</a> designer is to lead user to some logic milestone in the interface. And make user to achieve his goal.</p>

	<button data-lbxp-img="img/05.jpg">Button</button>
	<div class="banner" data-lbxp-img="img/06.jpg"></div>
</article>

JavaScript

new LiteBoxPro('article');