Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

JW Box: The JW Player Lightbox

NOTE: JW Box is no longer being actively maintained by LongTail Video, and is now a deprecated product. As such, we will not be providing support for issues relating to JW Box.

 



Click me!
JW Box Image
 
Click me!
JW Box Image
 
Click me!
JW Box Image
 

 

The internet can often feel like an endless source of distraction and interrupted thoughts. An act as simple as watching a video from start to finish can turn into a Herculean task. Why not hide the clutter on your screen and rid yourself of distractions? The JW Box, a lightbox designed specifically for the JW Player, expands your video (or image) and centers it against a darkened background for an optimal viewing experience.

In this tutorial you will learn how to:

Step 1: Download and Install the JW Box

  1. Download the following files and place them on your web server.
  2. Add the following lines of HTML code to all pages that will use the JW Box.

    We recommend placing these lines of HTML code in the <head> of your page, but any place before your first JW Box reference should be fine.

    <script type="text/javascript" src="http://www.mydomain.com/jwbox/jquery.js"></script>
<script type="text/javascript" src="http://www.mydomain.com/jwbox/jquery.jwbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/jwbox/jwbox.css" />

Step 2: Configure the JW Box

The JW Box gives you complete control over your lightbox display. Specifically, it allows you to configure:

What follows are some examples with common JW Box configurations.

For a more detailed explanation of how JW Box works and the purpose of each element, see Anatomy of the JW Box.

Video

JW Box was designed specifically for the JW Player, so formatting your player to display in the JW Box is both quick and easy. You will, however, need to be familiar with the practice of embedding video in your web page. If you don't know how to do so, or need a brief refresher, see our Embedding Flash tutorial.

Embed

To complete a standard embed, insert the following code in your web page. Make sure to replace the [Thumbnail URL] and [Video URL] variables with the appropriate values.

<div class="jwbox">
	<img width="160" height="120" alt="JW Box Image" title="JW Box Image" src="[Thumbnail URL]"/>
	<div class="jwbox_hidden">
		<div  class="jwbox_content">
			<object width="320" height="240" type="application/x-shockwave-flash" id="ply" name="ply" data="http://player.longtailvideo.com/player.swf"><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="flashvars" value="file=[Video URL]&image=[Thumbnail URL]"/></object>
		<p>Click the close button to return to the web page.</p>
		</div>
	</div>
</div>

<p>Click the image to display a player with a video in the JW Box.</p>

You should end up with something that looks like this:

JW Box Image
 

Click the close button to return to the web page.

Click the image to display a player with a video in the JW Box.

It’s important to note that this example assumes that you haven't already embedded the JW Player in your page. If you have, then you don't need to insert the code supplied above. Simply replace the flashvars parameter with your own, then update the height and width.

SWFObject

Configuring the JW Box is very easy if you're already using SWFObject. Just change the <div> ID below to that of your current player.

<div class="jwbox">
	<img width="160" height="120" alt="JW Box Image" title="JW Box Image" src="[Thumbnail URL]"/>
	<div class="jwbox_hidden">
		<div  class="jwbox_content">
			<div id="myPlayer"></div>
		<p>Click the close button to return to the web page.</p>
		</div>
	</div>
</div>

<p>Click the image to display a player with a video in the JW Box.</p>

Images

It's also possible to embed images using the JW Box. As before, you will need to enter the appropriate values for the [Image URL] and [Video URL] variables, where indicated in the example below.

<div class="jwbox">
	<img width="160" height="120" alt="JW Box Image" title="JW Box Image" src="[Image URL]"/>
	<div class="jwbox_hidden">
		<div  class="jwbox_content">
			<img alt="JW Box Image" title="JW Box Image" src="[Image URL]"/>
			<p>Click the close button to return to the web page.</p>
		</div>
	</div>
</div>

<p>Click the image to display the image in the JW Box.</p>

You'll end up with something that looks like this:

JW Box Image
JW Box Image

Click the close button to return to the web page.

Click the image to display the image in the JW Box.

Text

The most powerful aspect of JW Box is its ability to display an arbitrary HTML in a lightbox. To do this, replace the [Default display HTML] and [Lightboxed HTML] below.

<div class="jwbox">
	[Default display HTML]
	<div class="jwbox_hidden">
		<div  class="jwbox_content">
			[Lightboxed HTML]
		</div>
	</div>
</div>

<p>Click the text to display some HTML in the JW Box.</p>

You'll end up with something that looks like this:

Click this box!
Some tabular data:
1 2 3
4 5 6
7 8 9
JW Box Image

Click the close button to return to the web page.

Click the text to display some HTML in the JW Box.

Step 3: Customize the JW Box

CSS Style sheet

Truly advanced JW Box users may want to alter the background color of the transparent overlay or the lightbox itself. This can be done by editing the jwbox.css style sheet directly.

Anatomy of the JW Box

<div class="jwbox">
	[Default display HTML]
	<div class="jwbox_hidden">
		<div  class="jwbox_content">
			[Lightboxed HTML]
		</div>
	</div>
</div>

The JW Box contains the following elements:

  1. The outer <div "jwbox">. This serves as a container and reference point for any given JW Box.
  2. The HTML which is displayed by default. This is what the user will click on to display the lightboxed content.
  3. The <div "jwbox_hidden">. Everything inside of <div "jwbox_hidden"> is hidden until the user clicks on the default HTML, at which point, this content is show. This simple principle is what makes it possible to place any HTML content inside of the JW Box.
  4. The <div "jwbox_content">. Everything outside of <div "jwbox_content">, but within <div "jwbox_hidden"> can be considered part of the close button.