How to initialize HTML5 Lightbox after page load

By default, HTML5 Lightbox will initialize the Lightbox when the webpage is loaded. This tutorial will show you how to initialize the Lightbox after the page is loaded.

Step 1 - Assign a class name to the link

Normally, to open a link in HTML5 Lightbox, we add a class html5lightbox to the link. On page loading, HTML5 Lightbox will find the links with the class name and initialize them.

To delay the initialization, do not add the class name html5lightbox, assign a different class name for it. For example the following code add a class mylightbox to the link:

<a href="images/Toronto_1024.jpg" class="mylightbox" title="Toronto">Image</a>

Step 2 - Initialize the lightbox with JavaScript API

After the page is loaded, you can initialize the lightbox with JavaScript call:

jQuery(".mylightbox").html5lightbox();

A demo is as following:

Lightbox Link (Lightbox is only activated after you click the following button)

Click the button to initialize the above lightbox link: