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

How to displaying a Vimeo video in a Lightbox that launches with the page load

jQuery Video Lightbox

You can try the jQuery plugin HTML5 Lightbox: http://html5box.com/html5lightbox/index.php, the quick installation is here: http://html5box.com/html5lightbox/index.php#quickinstallation

You can add the following code to your webpage head section, just before </head>, and must be after the html5lightbox.js code.

<script type="text/javascript">
	jQuery("document").ready(function(){
		html5Lightbox.showLightbox(4, 'http://player.vimeo.com/video/1084537', 'Big Buck Bunny');
	});
</script>

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.

Auto play Vimeo video

jQuery Video Gallery

Question:

I have set the first clip to play automatically by adding 'autoplay=1’ within the vimeo code, and all works well in Safari, Chrome and Firefox on my mac. But on my iPad, the video overlays and transport bar don’t appear on the first video and it takes 2 clicks to pay the clip. On an iPhone, I can only see the top 2-3 millimetres of the video clip and from then on the content is hidden. Is it possible that I might have altered your code to make this happen, and are you able to find out if I have by looking at the source code?

Answer:

Video auto play is disabled on iOS and Android. It's a limit from the device. And you need to remove the manually added autoplay=1 from the Vimeo URL.

Jump to top when thumbnail is clicked

jQuery Video Gallery

Question:

Is it possible to make the page ‘jump’ back to the top (where the video container is) if a viewer has scrolled down to click thumbnail, so one click is enough anywhere in the thumbnail list, to play the video.

Answer:

You can take the following steps (only for version 3.2 and after):

1. Add the following the JavaScript to the head section, before 

<script language="JavaScript">
    function jumpToTop(data) {
    	window.scrollTo(0, 300);
    }
</script>

You can change the 300 to your desired value.

2. Add the following data tag to the div:

data-onthumbclick="jumpToTop"

You can view the updated demo page http://html5box.com/html5gallery/demo_mediacenter.php

How to make the gallery responsive

Responsive jQuery Gallery

Question:

You seem to have a unique gallery that will do exactly what I need. One of the things mentioned on your site is that it is responsive. The page on your site that I want to emulate is:

http://html5box.com/html5gallery/demo_mediacenter.php

but this isn’t responsive.

What I want to achieve with your gallery:

There has a video container at the top with potentially unlimited rows of three thumbs under, that break to a single column on mobile devices.

So the question is, if I buy a licence will I be able to make your gallery responsive and style it to look identical to my test page.

Answer:

Yes, you can achieve that with HTML5 Gallery.

The reason http://html5box.com/html5gallery/demo_mediacenter.php is not responsive is because our website itself is not responsive.

You just need to add the following data tag to your DIV, then the gallery will be responsive. Of course, your website itself must be responsive too.

data-responsive="true"

Responsive HTML5 Video Gallery

Responsive jQuery Gallery

Question:

We install the video gallery, but its not responsive, and the thumbwidth and thumbheight attribute doent work to set the dimensions of the thumbnails.

Theres the code :

<div class="html5gallery" data-width="1000" data-height="560" thumbwidth="140" thumbheight="85" data-showimagetoolbox="always"  data-skin="light" style="display:none;">

Answer:

You need to add data-responsive="true" to your div. For more details, you can check http://html5box.com/html5gallery/install.php#skinandsize

For the thumbnails, it's because you did not add "data-" prefix to the parameters. You can change your code to the following:

<div class="html5gallery" data-responsive="true" data-width="1000" data-height="560" data-thumbwidth="140" data-thumbheight="85" data-showimagetoolbox="always"  data-skin="light" style="display:none;">

Disable video auto play

jQuery Video Gallery

Question:

I am interested in using HTML5 Gallery on our new website (currently planned).

I have a question however.

We want the video files show the Vimeo player and not auto play when they load. Currently this seems to be set in the Javascript (via the autoplay=1 command).

If we purchase a commercial version on HTML5 Gallery are we able to change the Javascript to set the autoplay=0 instead or is there a data command to stop this? It seems that the thumbnails trigger auto play all the time.

Answer:

You can add the following data tags:

data-autoplayvideo="false"  data-playvideoonclick="false"

FLV format for video gallery

jQuery Video Gallery

Question:

I'm interested in buying the HTML5 Gallery to use on a client's site.

I'm wondering is there a way to tweak the plugin so that for videos on the site I can offer an FLV with a fallback to MP4 for users without flash (e.g. iPhone, iPad etc)? If so could you provide a quick tutorial if I were to purchase?

All videos I'm uploading are hosted on the server & need to be accessible to as many users as possible, from my client's old desktops with IE7 to a smartphone.

Answer:

You don't need the FLV format, one MP4 format is enough.

If HTML5 is not supported by the web browser or the device, the player will use Flash to play the mp4 file.

You can check here for more information: http://html5box.com/html5gallery/install.php#videoformat