Jump to content

Picture Gallery With Captions


gralamin

Recommended Posts

hello, I am a student with a project to make a web page. I though it would be pretty cool to have a picture gallery with thumbnails and captions. Searching the internet, I manged to find the following script (that has been slightly edited for a page on the site):

<HEAD><script LANGUAGE="JavaScript"><!-- Original:  Jenny Blewitt (webmaster@webdesignsdirect.com) --><!-- Web Site:  [url="http://www.webdesignsdirect.com"]http://www.webdesignsdirect.com[/url] --><!-- This script and many more are available free online at --><!-- The JavaScript Source!! [url="http://javascript.internet.com"]http://javascript.internet.com[/url] --><!-- BeginbrowserName = navigator.appName;browserVer = parseInt(navigator.appVersion);ns3up = (browserName == "Netscape" && browserVer >= 3);ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);function doPic(imgName) {if (ns3up || ie4up) {imgOn = ("" + imgName);document.mainpic.src = imgOn;   }}//  End --></script></HEAD><!-- STEP TWO: Copy this code into the BODY of your HTML document  --><BODY><center><table width=270 border=0 cellspacing=0 cellpadding=0><tr><td><a href="java script:doPic('images/aca_math1.jpg');"><img src="images/aca_math1.jpg" width=90 height=90 border=0></a></td><td><a href="java script:doPic('images/aca_math2.jpg');"><img src="images/aca_math2.jpg" width=90 height=90 border=0></a></td><td><a href="java script:doPic('images/aca_math3.jpg');"><img src="images/aca_math3.jpg" width=90 height=90 border=0></a></td></tr><tr><td colspan=3 align=center><img name="mainpic" src="images/aca_math0.jpg" width=270 height=270 border=0></td></tr><tr><td colspan=3 align=center>Caption, to be switched. Possibly using <div>?</td></tr></table></center><p><center><font face="arial, helvetica" size="-2">Free JavaScripts provided<br>by <a href="http://javascriptsource.com">The JavaScript Source</a></font></center><p><!-- Script Size:  2.00 KB -->

All I need is for the captions to change, when a thumbnail is clicked on. How would i do this?Thanks in advance

Link to comment
Share on other sites

EDIT: here....

<html><head><style type="text/css">img.thumb { width: 90px; height: 90px; border-width: 0px; cursor:pointer;}</style><script type="text/javascript"><!--var imgSrc = new Array(); imgSrc[0] = "images/aca_math0.jpg"; imgSrc[1] = "images/aca_math1.jpg"; imgSrc[2] = "images/aca_math2.jpg"; imgSrc[3] = "images/aca_math3.jpg"; var captions = new Array(); captions[0] = "default image caption"; captions[1] = "image caption 1"; captions[2] = "image caption 2"; captions[3] = "image caption 3"; function doPic(imgId) { document.getElementById('mainpic').src = imgSrc[imgId]; document.getElementById('caption').innerHTML = captions[imgId];}// --></script></head><body><table align="center" width="270" border="0" cellspacing="0" cellpadding="0"> <tr>  <td>   <img src="images/aca_math1.jpg" class="thumb" onClick="doPic('1');"></td>  <td>   <img src="images/aca_math2.jpg" class="thumb" onClick="doPic('2');"></td>  <td>   <img src="images/aca_math3.jpg" class="thumb" onClick="doPic('3');"></td> </tr> <tr>  <td colspan="3" align="center">   <img id="mainpic" src="images/aca_math0.jpg" width="270" height="270" border="0"></td> </tr> <tr>  <td colspan="3" align="center">   <span id="caption"></span>  </td> </tr></table></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...