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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Location
    Chicago
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rotating Images within a table

    I need a script to rotate images on the front page of a website. I have used an old script, but it is leaving too much white space, so I am looking to have three table cells within a table row all rotate with clickable images. Here is the current code: [CODE]<script language="JavaScript1.2">

    var howOften = 5; //number often in seconds to rotate
    var current = 0; //start the counter at 0
    var ns6 = document.getElementById&&!document.all; //detect netscape 6

    // place your images, text, etc in the array elements here
    var items = new Array();
    items[0]="<a href='link.htm' ><img alt='image0 (9K)' src=' https://system.na1.netsuite.com/core/media/media.nl?id=6&c=TSTDRV1062562&h=369dc60a220a66a711ed&whence=' height='300' width='300' border='0' /></a>"; //a linked image
    items[1]="<a href='link.htm'><img alt='image1 (9K)' src='https://system.na1.netsuite.com/core/media/media.nl?id=7&c=TSTDRV1062562&h=2510f26bfd1a28bfce8e&whence=' height='300' width='300' border='0' /></a>"; //a linked image
    items[2]="<a href='link.htm'><img alt='image2 (9K)' src='https://system.na1.netsuite.com/core/media/media.nl?id=8&c=TSTDRV1062562&h=b5aa1ca64ea92711cab2&whence=' height='300' width='300' border='0' /></a>"; //a linked image
    function rotater() {
    document.getElementById("placeholder").innerHTML = items[current];
    current = (current==items.length-1) ? 0 : current + 1;
    setTimeout("rotater()",howOften*1000);
    }

    function rotater() {
    if(document.layers) {
    document.placeholderlayer.document.write(items[current]);
    document.placeholderlayer.document.close();
    }
    if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
    if(document.all)
    placeholderdiv.innerHTML=items[current];

    current = (current==items.length-1) ? 0 : current + 1; //increment or reset
    setTimeout("rotater()",howOften*1000);
    }
    window.onload=rotater;
    //-->
    </script>
    <layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
    [CODE]
    Any help would be greatly appreciated.

    Thanks,
    Sharon

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    
    <table border="1">
      <tr>
        <td>
         <a href="" >
          <img id="i1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" border="0" onmouseover="zxcSFSlideShow.Pause('i1');" onmouseout="zxcSFSlideShow.Auto('i1');">
         </a>
        </td>
        <td>
         <a href="" >
          <img id="i2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" border="0" onmouseover="zxcSFSlideShow.Pause('i1');" onmouseout="zxcSFSlideShow.Auto('i1');">
         </a>
        </td>
        <td>
         <a href="" >
          <img id="i3" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" border="0" onmouseover="zxcSFSlideShow.Pause('i1');" onmouseout="zxcSFSlideShow.Auto('i1');">
         </a>
        </td>
      </tr>
    </table>
    
    <script type="text/javascript">
    <!--
    // Simplae Fade Slide Show. (14-August-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcSFSlideShow={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.ary[n]){
       this.rotate(o,n);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ImageID,ary=o.ImageArray,ms=o.FadeDuration,hold=o.AutoHold,srt=o.AutoStart,img=document.getElementById(id);
      if (img&&ary instanceof Array){
       var a=img.parentNode,c=document.createElement('IMG'),ms=typeof(ms)=='number'&&ms>0?ms:1000,z0=0;
       c.style.position='absolute';
       c.style.zIndex='201';
       c.style.left=c.style.top='-3000px';
       document.body.appendChild(c);
       for (;z0<ary.length;z0++){
        ary[z0][5]=new Image();
        ary[z0][5].src=ary[z0][0];
       }
       o.id=id;
       o.img=img;
       o.a=a.nodeName.toUpperCase()=='A'?a:null;
       o.ary=ary;
       o.c=[c];
       o.ms=ms;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.n=0;
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
      }
     },
    
    
     rotate:function(o,auto){
      clearTimeout(o.to);
      var n=o.n,p=this.pos(o.img),lgth=o.ary.length-1;
      o.auto=auto===true;
      n=o.auto?n+1:auto;
      n=n>lgth?0:n<0?lgth:n;
      if (o.ary[n][5].width>40){
       typeof(o.OnFade)=='function'?o.OnFade(n):null;
       o.c[0].src=o.ary[n][5].src;
       o.c[0].style.width=o.img.width+'px';
       o.c[0].style.height=o.img.height+'px';
       this.animate(o,o.c,0,100,new Date(),o.ms);
       o.c[0].style.left=p[0]+'px';
       o.c[0].style.top=p[1]+'px';
       o.a?o.a.removeAttribute('href'):null;
       o.a&&o.ary[n][1]?o.a.href=o.ary[n][1]:null;
       o.img.removeAttribute('title');
       o.ary[n][2]?o.img.title=o.ary[n][2]:null;
       o.n=n;
      }
      else {
       o.ary.splice(n,1);
       o.auto?this.Auto(o.id):null;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       n=Math.max(n,0);
       oop.opac(a[0],n);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       o.img.src=a[0].src;
       a[0].style.top='-3000px';
       typeof(o.OnComplete)=='function'?o.OnComplete(n):null;
       o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     opac:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     pos:function(o){
      var rtn=[0,0];
      while(o){
       rtn[0]+=o.offsetLeft;
       rtn[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return rtn;
     }
    
    
    }
    
    zxcSFSlideShow.init({
     ImageID:'i1',       // the unique ID name of the image.                              (string)
     ImageArray:[        // an array of arrays defining the images.                       (array)
      // field 0 = the image scr.
      // field 1 = (optional) the image link href.
      // field 2 = (optional) the image title.
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Egypt 1'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Egypt 2'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Egypt 3']
     ],
     FadeDuration:500,   //(optional) the fade duration in milli sceconds.                (number, default = 1000)
     AutoHold:2000,      //(optional) the auto rotation hold delay in milli sceconds.     (number, default = FadeDuration*4)
     AutoStart:1000,     //(optional) the auto rotation start  delay in milli sceconds.   (number, default = FadeDuration*4)
     OnFade:function(n){ //(optional) a function to call when starting fade of new image. (function, default = no function)
      // n =the current imasge index.
      zxcSFSlideShow.GoTo('i2',n);
      zxcSFSlideShow.GoTo('i3',n);
     },
     OnComplete:function(n){ //(optional) a function to call when fade in is complete.    (function, default = no function)
      // n =the current imasge index.
     }
    });
    
    zxcSFSlideShow.init({
     ImageID:'i2',
     ImageArray:[
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Egypt 1'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Egypt 2'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Egypt 3']
     ],
     FadeDuration:500
    });
    
    zxcSFSlideShow.init({
     ImageID:'i3',
     ImageArray:[
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Egypt 1'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Egypt 2'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Egypt 3']
     ],
     FadeDuration:500
    });
    //-->
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 08-15-2013 at 10:26 AM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,076
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Another version, not as fancy...
    Can not type (or think) as fast as Vic.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Image Rotator </title>
    <meta charset="utf-8">
    
    </head>
    <body>
    <table border="1">
     <tr>
      <td><img id="img0" src=""></td>
      <td><img id="img1" src=""></td>
      <td><img id="img2" src=""></td>
     </tr>
    </table>
    
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=299755
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = ['11.jpg','22.jpg','33.jpg'];
    var imgPick = 0;
    var imgDelay = 2;  // in seconds
    var imgTime;
    function updateImg() {
      var tmp;
      var Pick = (imgPick+1) % imgList.length;
      imgPick++;
      for (var i=0; i<imgList.length; i++) {
        tmp = 'img'+i;
        document.getElementById(tmp).src = baseURL+imgList[(Pick+i)%imgList.length];
      }
      imgTime = setTimeout(function(){updateImg()},imgDelay*1000);
    }
    window.onload = function() {
      updateImg();
    }
    </script>
    
    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Aug 2013
    Location
    Chicago
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Exactly what I was looking for. Thank you !!!

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,076
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by kokkinfam View Post
    Exactly what I was looking for. Thank you !!!
    You're most welcome, I'm sure, from both of us.
    Which one did you choose?
    Good Luck!

  • #6
    New to the CF scene
    Join Date
    Aug 2013
    Location
    Chicago
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The first one... but may still look at the second one. This script will be used over and over for client web sites. Again, thank you so much !!!


  •  

    Posting Permissions

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