After getting some great ideas from others and taking my own direction with them, I've created some nice HTML, Javascript, and PHP for my new portfolio.
Here's how it works. Thumbnails on the right, large frame on the left. I use Javascript (JS) to make the thumbnails change the main image without reloading the page (but the images don't preload). This was all good until I started working with QuickTime videos.
Here's my thumbnail link:
which launches this JS:
to fit into this:
Explanation:the thumbnail tells the image frame to load a poster image, which can then be clicked to play the video (you see this all over the internet).
The problem: this doesn't work in Firefox, and probably not in Safari either. But IE-Windows is fine. I think that I traced the problem to Firefox not reading any of the extra "Set___" commands besides "SetURL." I thought that maybe changing the order would work, but it was in vain. Looking around, it seems that that JS is nonstandard and only compatible with IE.
So is there a way to fix this? Did I do something wrong (very likely seeing as I know little about JS)?
I know that one reliable workaround is to not use poster images, which would make clicking on a thumbnail start playing the movie right away. I'd rather it show a large still frame from the animation so that visitors know what they're about to see instead of just jumping right into a black video. What's your opinion?
And once this is working, anyone who would like the script is welcome to use it.
Here's how it works. Thumbnails on the right, large frame on the left. I use Javascript (JS) to make the thumbnails change the main image without reloading the page (but the images don't preload). This was all good until I started working with QuickTime videos.
Here's my thumbnail link:
Code:
<a href="javascript:changeVideo('videos/special03.mov','videos/special03-start.mov');"><img src="images/special03-thumb.jpg" alt="" />Creation Museum Journey</a>which launches this JS:
Code:
function changeVideo(vidName,imgName) {
document.movie1.SetURL(imgName);
document.movie1.SetHREF(vidName);
document.movie1.SetTarget("myself");
document.movie1.SetControllerVisible(false);
}to fit into this:
Code:
<OBJECT
CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
WIDTH="415" HEIGHT="327"
CODEBASE="[url="http://www.apple.com/qtactivex/qtplugin.cab"]http://www.apple.com/qtactivex/qtplugin.cab[/url]"
id="movie1"
>
<PARAM NAME="src" VALUE="">
<PARAM NAME="controller" VALUE="false">
<PARAM NAME="target" VALUE="myself">
<PARAM NAME="href" VALUE="">
<PARAM NAME="pluginspage" VALUE="[url="http://www.apple.com/quicktime/download/"]http://www.apple.com/quicktime/download/[/url]">
<EMBED
WIDTH="415" HEIGHT="327"
CONTROLLER="false"
TARGET="myself"
HREF=""
SRC=""
BGCOLOR="000" BORDER="0"
PLUGINSPAGE="[url="http://www.apple.com/quicktime/download/indext.html"]http://www.apple.com/quicktime/download/indext.html[/url]"
EnableJavaScript="true"
name="movie1"
/>
</OBJECT>Explanation:the thumbnail tells the image frame to load a poster image, which can then be clicked to play the video (you see this all over the internet).
The problem: this doesn't work in Firefox, and probably not in Safari either. But IE-Windows is fine. I think that I traced the problem to Firefox not reading any of the extra "Set___" commands besides "SetURL." I thought that maybe changing the order would work, but it was in vain. Looking around, it seems that that JS is nonstandard and only compatible with IE.
So is there a way to fix this? Did I do something wrong (very likely seeing as I know little about JS)?
I know that one reliable workaround is to not use poster images, which would make clicking on a thumbnail start playing the movie right away. I'd rather it show a large still frame from the animation so that visitors know what they're about to see instead of just jumping right into a black video. What's your opinion?
And once this is working, anyone who would like the script is welcome to use it.
Facebook
Twitter