anthony.abraira
03-03-2007, 11:23 PM
Hello folks!
I just registered into this forum cause I have a matter that I suspect will be relatively easy to fix. Granted what in the computer world ever is? Anyways, I'll begin.
First thing I did was create a website that contained the leightbox. This particular Lightbox script permits other media (movies, text) to be inside the floating div. The div that controls the lightbox is one with its position css property set to: absolute.
I have successfully gotten the movie to work inside and have been able to put in a close button. However, upon closing the movie (assuming the movie was still playing) it continues to play in the background and hidden. Initiating the lightbox again creates another instance of the movie giving two movies to play at the same time.
I went ahead and read Apple's Developer Guide to using JavaScript with Quicktime and deciphered the command I need to stop it is:
function StopIt(anObj)
{
anObj.Stop();
}
So I made a text link called 'stop' and gave it this url:
<a href="javascript:PlayIt(document.movie1);">Play</a>
Now the problem is that I need to address this div called "leightbox", what is the proper syntax to address that particular div. I have tried all sorts
<a href="javascript:PlayIt(document.leightbox.movie1);">Play</a>
<a href="javascript:PlayIt(leightbox.movie1);">Play</a>
<a href="javascript:PlayIt(movie1);">Play</a>
I need two things. One, that the link successfully stops the movie AND closes the box. The full html file I am working with goes like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Leightbox
</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<!-- CSS -->
<link rel="stylesheet" href="css/screen.css" media="screen,projection" type="text/css" />
<!-- JavaScript -->
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/leightbox.js"></script>
</head>
</script>
<script language ="JavaScript">
<!--
/* define function that calls QuickTime's "Play" method */
function PlayIt(anObj)
{
anObj.Play();
}
/* define function that calls QuickTime's "Stop" method */
function StopIt(anObj)
{
anObj.Stop();
}
//-->
</script>
<body>
<div id="container">
<h1>Leightbox</h1>
<p>
I've changed ParticleTree's lightbox functionality to allow
the use of inline div's instead of AJAX calls. Very often I find that I want the data
in the lightbox to be indexable by search engines and visible to people with screenreaders etc.
This adaptation makes that possible. Mind you, i've completely removed the AJAX calls.
</p>
<p>
<ul>
<li><a href="#lightbox1" rel="lightbox1" class="lbOn">Leightbox 1</a></li>
<li><a href="#lightbox2" rel="lightbox2" class="lbOn">Leightbox 2</a></li>
<li><a href="#lightbox3" rel="lightbox3" class="lbOn">Leightbox 3</a></li>
</ul>
</p>
<p class="footer">
</div><!--container-->
<div id="lightbox1" class="leightbox">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
height="276" width="480" id="movie1">
<param name="src" value="jesus.mov" />
<param name="controller" value="false" />
<embed
name="movie1"
height="276"
pluginspage="http://www.apple.com/quicktime/download/"
src="jesus.mov"
type="video/quicktime"
width="480"
controller="true"
autoplay="true"
loop="true"
enablejavascript="true"
>
</embed>
</object>
<a href="javascript:PlayIt(movie1);">Play</a>
<a href="javascript:StopIt(movie1);">Close</a>
</div>
</body>
</html>
I feel it is important to mention that I have gotten the script to stop and play the movie as indicated in the lines at the end:
<a href="javascript:PlayIt(movie1);">Play</a>
<a href="javascript:StopIt(movie1);">Close</a>
But these only work when the <script> is inserted inside the absolute div. However this causes all browsers to show ONLY the quicktime movie in the browser. Apparently putting the code inside the div caused this behavior.:eek:
I just registered into this forum cause I have a matter that I suspect will be relatively easy to fix. Granted what in the computer world ever is? Anyways, I'll begin.
First thing I did was create a website that contained the leightbox. This particular Lightbox script permits other media (movies, text) to be inside the floating div. The div that controls the lightbox is one with its position css property set to: absolute.
I have successfully gotten the movie to work inside and have been able to put in a close button. However, upon closing the movie (assuming the movie was still playing) it continues to play in the background and hidden. Initiating the lightbox again creates another instance of the movie giving two movies to play at the same time.
I went ahead and read Apple's Developer Guide to using JavaScript with Quicktime and deciphered the command I need to stop it is:
function StopIt(anObj)
{
anObj.Stop();
}
So I made a text link called 'stop' and gave it this url:
<a href="javascript:PlayIt(document.movie1);">Play</a>
Now the problem is that I need to address this div called "leightbox", what is the proper syntax to address that particular div. I have tried all sorts
<a href="javascript:PlayIt(document.leightbox.movie1);">Play</a>
<a href="javascript:PlayIt(leightbox.movie1);">Play</a>
<a href="javascript:PlayIt(movie1);">Play</a>
I need two things. One, that the link successfully stops the movie AND closes the box. The full html file I am working with goes like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Leightbox
</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<!-- CSS -->
<link rel="stylesheet" href="css/screen.css" media="screen,projection" type="text/css" />
<!-- JavaScript -->
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/leightbox.js"></script>
</head>
</script>
<script language ="JavaScript">
<!--
/* define function that calls QuickTime's "Play" method */
function PlayIt(anObj)
{
anObj.Play();
}
/* define function that calls QuickTime's "Stop" method */
function StopIt(anObj)
{
anObj.Stop();
}
//-->
</script>
<body>
<div id="container">
<h1>Leightbox</h1>
<p>
I've changed ParticleTree's lightbox functionality to allow
the use of inline div's instead of AJAX calls. Very often I find that I want the data
in the lightbox to be indexable by search engines and visible to people with screenreaders etc.
This adaptation makes that possible. Mind you, i've completely removed the AJAX calls.
</p>
<p>
<ul>
<li><a href="#lightbox1" rel="lightbox1" class="lbOn">Leightbox 1</a></li>
<li><a href="#lightbox2" rel="lightbox2" class="lbOn">Leightbox 2</a></li>
<li><a href="#lightbox3" rel="lightbox3" class="lbOn">Leightbox 3</a></li>
</ul>
</p>
<p class="footer">
</div><!--container-->
<div id="lightbox1" class="leightbox">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
height="276" width="480" id="movie1">
<param name="src" value="jesus.mov" />
<param name="controller" value="false" />
<embed
name="movie1"
height="276"
pluginspage="http://www.apple.com/quicktime/download/"
src="jesus.mov"
type="video/quicktime"
width="480"
controller="true"
autoplay="true"
loop="true"
enablejavascript="true"
>
</embed>
</object>
<a href="javascript:PlayIt(movie1);">Play</a>
<a href="javascript:StopIt(movie1);">Close</a>
</div>
</body>
</html>
I feel it is important to mention that I have gotten the script to stop and play the movie as indicated in the lines at the end:
<a href="javascript:PlayIt(movie1);">Play</a>
<a href="javascript:StopIt(movie1);">Close</a>
But these only work when the <script> is inserted inside the absolute div. However this causes all browsers to show ONLY the quicktime movie in the browser. Apparently putting the code inside the div caused this behavior.:eek: