0 Replies - 407 Views - Last Post: 20 March 2013 - 11:15 AM

#1 Handler  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 199
  • Joined: 01-April 10

Mini video gallery refinement

Posted 20 March 2013 - 11:15 AM

Tried out javascript for the first time today and pumped out this mini video gallery. It works fine, but it is not as refined as I'd like it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CrossFit Stellenbosch</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link type="image/gif" href="Images/kettle.ico" rel="icon" />
<link rel="shortcut icon" href="Images/kettle.ico" />
</head>

<script>
	function changeContent(link)
	{
		document.getElementById("MainVideo").innerHTML="<td colspan=\"4\"><iframe width=\"560\" height=\"316\" src=\"http://www.youtube.com/embed/"+link+"\" frameborder=\"0\" allowfullscreen></iframe></td>";
	}
</script>

<body onload="changeContent('mlVrkiCoKkg');" >
	<table>
		<tr>
			<div id="MainVideo">
					
			</div>
		</tr>
		<tr>
			<td>
				<div id="image1" >
					<input type="image" width="138" height="90" class="btnVideo1" src="http://img.youtube.com/vi/mlVrkiCoKkg/0.jpg" onclick="changeContent('mlVrkiCoKkg');">
				</div>
			</td>
			<td>
				<div id="image2" >
					<input type="image" width="138" height="90" class="btnVideo2" src="http://img.youtube.com/vi/38tvLfbmU8s/0.jpg" onclick="changeContent('38tvLfbmU8s');">
				</div>
			</td>
			<td>
				<div id="image3" >
					<input type="image" width="138" height="90" class="btnVideo3" src="http://img.youtube.com/vi/Fd88gGmZBbE/0.jpg" onclick="changeContent('Fd88gGmZBbE');">
				</div>
			</td>
			<td>
				<div id="image4" >
					<input type="image" width="138" height="90" class="btnVideo4" src="http://img.youtube.com/vi/5Sqr6nFaFz4/0.jpg" onclick="changeContent('5Sqr6nFaFz4');">
				</div>
			</td>
		</tr>
	</table>
</body>
</html>



Now since I'm very new to js, I dont really know what refinements I can do, both code-wise and aesthetics-wise, but I have a few ideas:
- Better way to load the big video the first time.
- Better way to change which video is displaying.

My only problem is I dont know how to do the refinement so any tips and hints are welcome.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1