Category Archives: jQuery LightBox

Tracking HTML5 Lightbox with Google Analytics


HTML5 Lightbox


Is there any way to add Google Analytics code which would track the lightbox link on the page? I would like to see how many times the link to the video is clicked on the page?


You could add the following JavaScript to your webpage. Please make sure to change the tracking id to your own Google Analytics tracking id.

<script type="text/javascript">
    var html5lightbox_options = {
    	googleanalyticsaccount: "UA-XXXXXXXX-X"

To view the tracked events, in Google Analytics dashboard, click left menu Behavior -> Events -> Top Events, click Event Category "Lightbox", then Event Action "Open", the URL of the lightbox image/video will be listed as the Event Label.

How to open Wistia video with HTML5 Lightbox


HTML5 Lightbox


I moved my videos to Wistia and I am wondering how can I open Wistia video in lightbox.


To open Wistia video with HTML5 Lightbox, first, you need to find the iframe video URL of your video.

You can view the document at, get the iframe code then copy the URL from the iframe src value.

Then you can use the following code to open the video in lightbox:

<a href="//" class="html5lightbox" data-width=730 data-height=411 >Open Wistia Video in HTML5 Lightbox</a>

To auto play the video on lightbox popup, you can add parameter autoPlay=true to the URL:


Please understand video auto play is not supported on mobile and tablet devices.

The demo is as following:

Open Wistia Video in HTML5 Lightbox

Re-position watermark in HTML5 Lightbox


* This question is for the script HTML5 Lightbox.

I was just wondering, how do I re-position watermark image in lightbox. Currently its on the top left hand side of the lightbox gallery. I wish to make it re-position to the bottom left or right.


You can add the following CSS code to your webpage to move the watermark to the bottom right:

<style type="text/css">
#html5-watermark {
    position: absolute !important;
    top: auto !important;
    left: auto !important; 
    right: 10px !important;   
    bottom: 56px !important;

Change Lightbox CSS properties with own code


Dear support team,

I purchased a single license for the HTML5 lightbox product. The lightbox is installed in a testing website and working well for the most part. The videos are self hosted.

Using the Chrome developer tools I was able to identify the following html page elements:


Adding custom CSS rules to these elements in the html document head does not override the default css.

Can you please advise?


To change the css property with your own code, you need to add the !important at the end of each css value, for example, to change the background overlay color:

#html5-lightbox-overlay {
    background-color: #ff0000 !important;

The !important will override the default css that is setup by the Lightbox script.

Add a hyperlink in Lightbox text


I am using your HTML5 Lightbox scripts and the player. I have created a video, but now need to place an URL, to link to a web description page. Is it possible to add a text url on the bottom area of the video. I have already placed some text there, but I need an hyperlink there.


You can use HTML code in the title, for example:

<a href="images/Evening_1024.jpg" class="html5lightbox" title="You can add link in text <a href=''></a>.">
<img src="images/Evening_96.jpg" />

You can check the demo Image on the page:

Open webpage with HTML5 Lightbox


Hi Support-

I was wondering how to go about Lightbox opening up a html page instead of a video?

Second, I am using Ajax tabs to load pages. Will that be a problem?

Thank you, let me know.


To open a webpage in the Lightbox, you can just add the class name to the link, for example:

<a href="" class="html5lightbox" data-width="960" data-height="600">Link to Page</a>

Ajax loading may be problem. If you experience any problem, after your Ajax loading finishes, you can try to call the HTML5 Lightbox API to re-initialise the script:


Open Lightbox with JavaScript function


Is there a way to toggle the Lightbox on and off programmatic. For example, I would like to control how the Lightbox opens and closes. Do you guys have a developers guide to this. Let me know. Thank you.

PS I know html5Lightbox.finish() will help close it. But what is the global function to open the lightbox?


You can call the JavaScript API to open the Lightbox, for example:

Open image:

html5Lightbox.showLightbox(0, 'images/Toronto_1024.jpg', 'Image lightbox');

Open YouTube;

html5Lightbox.showLightbox(3, '', 'YouTube lightbox');

Close jQuery LightBox with JavaScript


I have loaded one page into html5lightbox and in that page i have one button. on that button i want to close html5lightbox and redirect to other page. so, any method of custom event for that please?


You can call the following JavaScript function to close the lightbox effect:


html5Lightbox is a global variable created by the script.

What’s the difference between HTML5 Gallery and HTML5 Lightbox?


Can you please tell me the difference between gallery and html5 lightbox?


They are similar products,  both support images and videos, but they can make different style galleries:

With HTML5 gallery, you can embed the gallery in your web page.
With HTML5 Lightbox, your can display an image/video/gallery in a lightbox popup.