I have followed the instrustions on the following page to the letter but I am getting nowhere with the JW Box. I am using an image to link to a video, just like the first example.
http://www.longtailvideo.com/support/tutorials/JW-Player-Lightbox
Below is the code I am using (taken from the aforementioned page). I have replaced the url place holders with appropriate, working urls.
<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>What could be going wrong? Thanks in advance for any help.
Works — Firefox only. (Maybe later I can figure out what's wrong with IE — probably some CSS or JS thing.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en">
<head>
<title>Simple JW Box - JWMP v4.7.x</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.2');
</script>
<script src="jquery.jwbox.js"></script>
<link rel="stylesheet" type="text/css" href="jwbox.css"/>
</head>
<body>
<div id="container">
<div id="jwbox_background">
</div>
<div class="jwbox">
<img width="160" height="120" alt="JW Box Image" title="JW Box Image" src="image01.jpg" />
<div class="jwbox_hidden">
<div class="jwbox_content">
<object width="600" height="358" type="application/x-shockwave-flash" id="ply" name="ply" data="player-4.7.581.swf">
<param name="allowfullscreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="flashvars" value="file=video02.mp4&image=image02.jpg"/>
</object>
<p>Click the close button to return to the web page.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Change to your video file and images.