How to initialize the HTML5 Gallery after the web page is loaded

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

Step 1 - Assign an id to the HTML5 Gallery div

Normally, to initialize a gallery, we add a class html5gallery to the gallery div. On page loading, the HTML5 Gallery script will find the div and initialize it. To delay this initialization, do not add the class name, assign an id for it. For example:

<div id="mygallery1" data-skin="gallery" data-width="480" data-height="270"  style="display:none;">
</div>

Step 2 - Initialize the gallery with JavaScript

After the page is loaded, you can initialize the gallery with JavaScript call.

jQuery("#mygallery1").html5gallery();

jQuery("#mygallery1").html5gallery({
		skin: "gallery",
		remote: "https://html5box.com/html5gallery/playlist.php"
});

All options that are valid for data tag can be used in the call.

A demo is as following: Click to initialize and display the gallery