Not registered? Sign up!

JW Box: The JW Player Lightbox

Click me!

Click me!

Introduction

JW Box is a lightbox designed specifically for the JW Player. Unlike the player's full screen mode, JW Box allows you to see the sections of the screen not covered by the player itself. Best of all, JW Box allows you to use an unobtrusive placeholder for your player while still allowing it to expand for a better view when needed.

Installation

Setting up a jwbox is fast and easy. Just follow these simple steps and you'll be up and running in no time!

Download the following files and place them on your web server.

Add the following HTML to all pages that will use the JW Box.*

<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" />

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

Creating a JW Box

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

the visual element that launches the lightbox
the content within the lightbox itself

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 a JW Box.

Video

JW Box was designed for use with the JW Player, so adding your player to a JW Box is quick and easy. Even still, we recommend that you familiarize yourself with how to embed a video in your web page. For a more detailed discussion of the various ways to do this, see the Embedding Flash tutorial.

Embed

If you plan on using a normal embed, simply replace the [Thumbnail URL] and [Video URL] below.

<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 a JW Box.</p>

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

Click the close button to return to the web page.
Click the image to display a player with a video in a JW Box.

Note that the supplied <embed> is merely an example. If you've already got a player embedded on your page, simple replace the flashvars param with your own set of flashvars and update the height and width.

SWFObject

Using JW Box is even easier if you're already using SWFObject. Simply 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 a JW Box.</p>

Images

It's also possible to embed images using the JW Box. Simply replace the [Image URL] and [Video URL] 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 a JW Box.</p>

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

Click the close button to return to the web page.
Click the image to display the image in a JW Box.

Text

The most powerful aspect of JW Box is its ability to display an arbitrary HTML in a lightbox. Simply 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 a JW Box.</p>

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

Click this box!
Some tabular data:
123
456
789
Click the close button to return to the web page.
Click the text to display some HTML in a JW Box.

Advanced JW Box

CSS Stylesheet

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

Anatomy of a JW Box

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

A JW Box contains the following elements:

The outer <div "jwbox">. This serves as a container and reference point for any given JW Box.
The HTML which is displayed by default. This is what the user will click on to display the lightboxed content.
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 a JW Box.
The <div "jwbox_content">. Everything outside of <div "jwbox_content">, but within <div "jwbox_hidden"> can be considered part of the close button.

JW WMV Player

Download the newest JW Player built with Silverlight. It’s as flexible as the FLV Player but works with Windows Media files. What could be better?

URL: http://www.longtailvideo.com/jw/?item=jw_box:_the_jw_player_lightbox