Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    children/child nodes and images

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Easiest if you look at this

    PHP Code:
    <!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> 

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yea that code didnt work at all...do u have a site where it came from...or any other suggestions?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •