Movie Gallery

**jadepearl** · 05-27-2008, 01:43 PM

Hi Medyman!

I think I finally succeeded! I place everything in the same file. Am I correct to say that when I click on the thumbnail, the swf movie will be played in a new page? If that's true, then I finally managed to get it right with this codes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style text="text/css">
.hide {
display:none;
}
</style>
<script type="text/javascript">

</script>

</head>

<body>

<div id="pool.swf" class="hide">
POOL MOVIE HERE
<object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="297">
<param name="movie" value="pool.swf">
<param name="quality" value="high">
<embed src="pool.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="297"></embed>
</object>
</div>
<div id="condo.swf" class="hide">
CONDO MOVIE HERE
<object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="297">
<param name="movie" value="condo.swf">
<param name="quality" value="high">
<embed src="condo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="297"></embed>
</object>
</div>
<p><a href="pool.swf"><img src="thumb01.gif" width="75" height="50" border="0" onclick="toggle_visibility('pool.swf);"></a></p>
<p><a href="vmcondo.swf"><img src="thumb02.gif" width="75" height="50" border="0" onclick="toggle_visibility('condo.swf);"></a>
</p>

<p> </p>
</body>
</html>

Thanks so so much! Thank you so much!
I finally learnt something new and understand it.

Question:
May I know what should I do if I want the swf movies to appear on the allocated box on the same webpage?

*Thumbnail 1* * Thumbnail 2*
___________________________

The swf movie will appear in
this box accordingly.

____________________________

Thanks so much! You are an awesome teacher!

**Medyman** · 05-27-2008, 01:54 PM

May I know what should I do if I want the swf movies to appear on the allocated box on the same webpage?

I'm not sure I know what you mean. They're currently on the same page. Do you mean you want them to show instead of being hidden?

If so, just remove class="hide" from the <div> tag.

Thanks so much! You are an awesome teacher!

You're very welcome. Glad to help.

By the way, in IE and Opera you'll notice that the SWF files have this border around them that says "click here to activate". If you want to get rid of that you should use another embedding technique. I recommend SWFObject.

Documentation on SWFObject is here. Examples are here. Code generator is here. FAQs are here.

**jadepearl** · 05-27-2008, 02:06 PM

Hi Medyman,

What I meant was after I pressed F12 to preview in browser, I can see 2 thumbnails on the webpage. When I click on the 1st thumbnail, the swf movie appears in a new webpage.

Thanks so much for your help!

**Medyman** · 05-27-2008, 02:15 PM

Ahh, I see.
That's because you have this:

Code:

<a href="pool.swf"><img src="thumb01.gif" width="75" height="50" border="0" onclick="toggle_visibility('pool.swf);"></a>

You actually don't need the anchors (<a>) because the onClick javascript replicates that functionality. So the above should be:

Code:

<img src="thumb01.gif" width="75" height="50" border="0" onclick="toggle_visibility('pool.swf);">

Similarly, you can get rid of the

Code:

<a href="vmcondo.swf"></a>

as well.

**jadepearl** · 05-27-2008, 02:31 PM

Hi Medyman,

When I remove the the anchors (<a>), somehow, when I clicked on the thumbnails, nothing happens.

Thanks!

**Medyman** · 05-27-2008, 02:50 PM

You're missing closing quotes in the toggle_visibility parameter. Add highlighted:

Code:

<p><img src="thumb01.gif" width="75" height="50" border="0" onclick="toggle_visibility('pool.swf');"></p>
<p><img src="thumb02.gif" width="75" height="50" border="0" onclick="toggle_visibility('condo.swf');"></p>

**jadepearl** · 05-27-2008, 02:57 PM

Hi Medyman,

It worked!

Yippee!!!!

THANK YOU SO MUCH!!!

But, the funny thing is:
1) When I click on Thumbnail01, the 1st swf movie will appear above of the thumbnails.
2) When I click on Thumbnail02, the 2nd swf movie will appear below of the 1st swf movie. So, I have 2 swf movies playing simultaneously.
3) When I click on Thumbnail02 again, the 2nd swf movie will disappear and only left the 1st swf movie playing.
4) When I click on Thumbnail02 again, the 1st swf movie will disappear and only left 2 thumbnails images only.

Is this how it should be?

Thanks so much!!!

**Medyman** · 05-27-2008, 06:38 PM

Is this how it should be?

As the javascript is now, yes. Bascially the first thumbnail toggles the first SWF, the second thumbnail goggles the second SWF. So you can turn the first SWF off/on with the first thumnail. And same logic goes for the second. They're independent of each other.

If you only want one to show at a time, change

Code:

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

to

Code:

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';

if(e.id == 'condo') document.getElementById('pool').style.display = 'none';
if(e.id == 'pool') document.getElementById('condo').style.display = 'none';
}
//-->
</script>

The highlighted correspond to your HTML div id's. So change them accordingly. I think you're still using .swf in your ids (though, like I said before, that should probably be removed).