Category Archives: jQuery LightBox

Tracking HTML5 Lightbox with Google Analytics

HTML5 Lightbox, HTML5 Video Lightbox, jQuery LightBox, jQuery Video Lightbox

Product:

HTML5 Lightbox

Question:

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?

Answer:

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"
    };
</script>

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, HTML5 Video Lightbox, jQuery LightBox, jQuery Video Lightbox

Product:

HTML5 Lightbox

Question:

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

Answer:

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 http://wistia.com/doc/embedding#fallback_iframe_embed, 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="//fast.wistia.net/embed/iframe/avk9twrrbn" 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:

<a href="//fast.wistia.net/embed/iframe/avk9twrrbn?autoPlay=true" class="html5lightbox" data-width=730 data-height=411 >Open Wistia Video in HTML5 Lightbox</a>

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

HTML5 Lightbox, jQuery LightBox

Question:

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

Answer:

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;
}
</style>

Change Lightbox CSS properties with own code

HTML5 Lightbox, jQuery LightBox

Question:

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:

#html5-lightbox-overlay
#html5-lightbox-box
#html5-next
#html5-prev
.html5-nav-container

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

Can you please advise?

Answer:

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

HTML5 Lightbox, jQuery LightBox, jQuery Video Lightbox

Question:

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.

Answer:

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='http://www.html5box.com'>HTML5Box.com</a>.">
<img src="images/Evening_96.jpg" />
</a>

You can check the demo Image on the page: http://html5box.com/html5lightbox/index.php

Open webpage with HTML5 Lightbox

HTML5 Lightbox, jQuery LightBox

Question:

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.

Answer:

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

<a href="http://www.yoursite.com/yourpage.htm" 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:

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

Open Lightbox with JavaScript function

jQuery LightBox

Question:

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?

Answer:

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, 'http://www.youtube.com/embed/YE7VzlLtp-4', 'YouTube lightbox');

Close jQuery LightBox with JavaScript

jQuery LightBox

Question:

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?

Answer:

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

html5Lightbox.finish();

html5Lightbox is a global variable created by the script.

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

jQuery Gallery, jQuery LightBox

Question:

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

Answer:

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.