...
PDA

children/child nodes and images

FreakaBoo9
03-19-2005, 05:14 AM
could children or child nodes be used to make thumbnails clickable to a slideshow area as well as foward and back buttons?..

right now i can either have a slideshow with forward and back buttons

or i can have thumnails that when clicked make the larger image apear....

i want to combine the two...

http://www.infraredsky.com/photo.html (slideshow works)

http://www.infraredsky.com/photo02.html (clicking thumbnails works)

I'm incredibly desparate and a bit of a beginner with javascript...please please help
vwphillips
03-19-2005, 08:30 AM
Easiest if you look at this


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
var zxcThumbPath='http://wcsidecars.co.uk/Popham2003/Thumbs/';
var zxcMainPath='http://wcsidecars.co.uk/Popham2003/Main/';

var ptcPhoto=new Array;
var PCnt=0
ptcPhoto[PCnt++]='dscf0001.jpg^Pic 0';
ptcPhoto[PCnt++]='dscf0002.jpg^Pic 1';
ptcPhoto[PCnt++]='dscf0003.jpg^Pic 2';
ptcPhoto[PCnt++]='dscf0004.jpg^Pic 3';
ptcPhoto[PCnt++]='dscf0005.jpg^Pic 4';
ptcPhoto[PCnt++]='dscf0006.jpg^Pic 5';
ptcPhoto[PCnt++]='dscf0007.jpg^Pic 6';
ptcPhoto[PCnt++]='dscf0008.jpg^Pic 7';
ptcPhoto[PCnt++]='dscf0009.jpg^Pic 8';

var zxcThumbs=ptcPhoto;
var zxcTbCnt=0;
var zxcSSNu=0;

function zxcInit(){
zxcM=document.getElementById('zxcMain')
zxcti=document.getElementById('zxcDisplay').getElementsByTagName('IMG');
for (zxc0=0;zxc0<zxcti.length;zxc0++){
if (zxcti[zxc0].title=='zxcThumb'){
zxcti[zxc0].src=zxcThumbPath+zxcThumbs[zxcTbCnt].split('^')[0];
zxcti[zxc0].title=zxcThumbs[zxcTbCnt].split('^')[1];
zxcti[zxc0].style.cursor='hand';
zxcti[zxc0].style.cursor='pointer';
zxcti[zxc0].nu=zxc0;
zxcti[zxc0].onclick=function(){ zxcChgMain(this.nu); }
zxcTbCnt++;
}
}
zxcM.src=zxcMainPath+zxcThumbs[0].split('^')[0];
zxcM.title=zxcThumbs[0].split('^')[1];
}

function zxcChgMain(zxc){
zxcSSNu=zxc;
zxcM.src=zxcMainPath+zxcThumbs[zxc].split('^')[0];
zxcM.title=zxcThumbs[zxc].split('^')[1];
}

function zxcSlideShow(zxc){
if (zxc.toLowerCase()=='back'){
zxcSSNu--;
if (zxcTbCnt<0){ zxcSSNu=zxcTbCnt-1; }
}
else {
zxcSSNu++;
if (zxcSSNu>=zxcTbCnt){ zxcSSNu=0; }
}
zxcChgMain(zxcSSNu);
}

//-->
</script>
<body onload="zxcInit();" >
FreakaBoo9
<table id="zxcDisplay" width="300" cellpadding="0" cellspacing="0" style="text-align:center;" >
<tr height="80" >
<td width="33%" ><img title="zxcThumb" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"></td>
<td><img title="zxcThumb" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"></td>
<td><img title="zxcThumb" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"></td>
</tr>
<tr height="80" >
<td><img title="zxcThumb" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"></td>
<td><img title="zxcThumb" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"></td>
<td><img title="zxcThumb" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"></td>
</tr>
<tr height="80" >
<td><img title="zxcThumb" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"></td>
<td><img title="zxcThumb" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"></td>
<td><img title="zxcThumb" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif"></td>
</tr>
<tr height="50" >
<td align="center" onclick="javascript:zxcSlideShow('Forward');" style="font-size:13px;font-weight:bold;" >&gt; &gt; Fwd &gt; &gt;</td>
<td></td>
<td align="center" onclick="javascript:zxcSlideShow('Back');" style="font-size:13px;font-weight:bold;" >&lt; &lt; Back &lt; &lt;</td>
</tr>
<tr>
<td colspan="3">
<img id="zxcMain" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif">
</td>
</tr>
</table>
</body>

</html>
FreakaBoo9
03-21-2005, 07:19 AM
yea that code didnt work at all...do u have a site where it came from...or any other suggestions?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum