How do I create a video lightbox?

The only prerequisite for adding this effect to your site is that you must have FTP access to upload the JavaScript files that are needed. You will need to replace parts of this code with your own video details. All of these are marked in capital letters.

Before we start, here's a demo of the finished product.

First, download the zoombox zip file: zoombox.zip

Unzip the file and upload the resulting zoombox folder to the home directory of your site using an FTP client.

Now, open your HTML editor and paste the following into the <head> section of the page where you want to use the effect:

<link rel="stylesheet" href="http://YOURWEBSITE.COM/zoombox/zoombox.css"  type="text/css" media="screen" />

Paste the following at the bottom of your page, right before the closing </body> tag:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://YOURWEBSITE.COM/zoombox/zoombox.js"></script> 
<script type="text/javascript">
  $(function() {
    $('a.zoombox').zoombox();
  });
</script>

Paste the following in your page at the place you want the thumbnail to appear, and then replace the video ID numbers with your own:

<a class="zoombox zgallery1" title="YOUR VIDEO TITLE" href="http://view.vzaar.com/VIDEO_ID_NUMBER/player">
    <img src="http://view.vzaar.com/VIDEO_ID_NUMBER/thumb"  alt="YOUR VIDEO DESCRIPTION" />
</a>

You can paste the previous code as many times as you like to add more videos to your page, changing the video's ID number on each.

If you want to specify video dimensions, add the following to the previous code:

<a class="zoombox zgallery1 w786 h450" ...

If all went well, you should end up with something like this:

lightbox_screen.png

You can also specify some other parameters to alter the default settings:

 $('a.zoombox').zoombox({
   theme       : 'zoombox',        //available themes: 
                                   //zoombox,lightbox, prettyphoto, 
                                   //darkprettyphoto, simple
   opacity     : 0.8,              // Black overlay opacity
   duration    : 800,              // Animation duration
   animation   : true,             // Do we have to animate the box ?
   width       : 600,              // Default width
   height      : 400,              // Default height
   gallery     : true,             // Allow gallery thumb view
 });