Results 1 to 2 of 2

Thread: Image revolver

  1. #1
    Join Date
    Jun 2012
    Posts
    29
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Angry Image revolver

    Hello,

    I have tried so many different codes and nothing has worked. I am trying to make a revolving image for a website using javascript and CSS if necessary. Im looking for the images to fade nicely into the next one and the images will be located in my images folder. I do not get on with javascript.

    Gemma

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    // Fade Slide Show (26-July-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcFadeSS={
    
     init:function(o){
      var id=o.ID,img=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,hold=typeof(hold)=='number'?hold:ms*2,srt=o.AutoStart,clone=document.createElement('IMG'),src,z0=0;
      for (;z0<ary.length;z0++){
       src=ary[z0][0];
       ary[z0][0]=new Image();
       ary[z0][0].src=src;
      }
      clone.style.position='absolute';
      clone.style.zIndex='101';
      clone.style.left='-3000px';
      clone.style.top='-3000px';
      clone.style.width=img.width+'px';
      clone.style.height=img.height+'px';
      document.body.appendChild(clone);
      this['zxc'+o.ID]={
       id:id,
       img:img,
       a:img.parentNode,
       clone:clone,
       ary:ary,
       lgth:z0-1,
       ms:ms,
       hold:hold,
       cnt:0,
       ud:1
      };
      if (typeof(srt)=='number'){
       this.Auto(id,srt);
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,false,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]&&nu!=o.cnt){
       o.cnt=nu;
       this.rotate(o,false,nu);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     rotate:function(o,auto,nu){
      var p=this.pos(o.img);
      this.Pause(o.id);
      o.auto=auto===true;
      if (o.auto){
       nu=o.cnt+o.ud;
      }
      o.cnt=nu>o.lgth?0:nu<0?o.lgth:nu
      o.a.removeAttribute('href');
      if (o.ary[o.cnt][1]){
       o.a.href=o.ary[o.cnt][1];
      }
      o.clone.src=o.ary[o.cnt][0].src;
      o.clone.style.left=p[0]+'px';
      o.clone.style.top=p[1]+'px';
      clearTimeout(o.dly);
      this.animate(o,0,100,new Date(),o.ms);
     },
    
     animate:function(o,f,t,srt,mS){
      var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
      }
      else {
       o.img.src=obj.src
       obj.style.left='-3000px';
       if (o.auto){
        oop.Auto(o.id,o.hold);
       }
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    
    }
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <input type="button" name="" value="Next +ve" onmouseup="zxcFadeSS.Next('slide',1);" />
    <input type="button" name="" value="Next -ve" onmouseup="zxcFadeSS.Next('slide',-1);" />
    <input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSS.GoTo('slide',0);" />
    <input type="button" name="" value="GoTo 2" onmouseup="zxcFadeSS.GoTo('slide',1);" />
    <input type="button" name="" value="GoTo 3" onmouseup="zxcFadeSS.GoTo('slide',2);" />
    <input type="button" name="" value="GoTo 4" onmouseup="zxcFadeSS.GoTo('slide',3);" />
    <br />
    <br />
    <a href="#">
    <img src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg" id="slide" border=0 width="630" height="300" scrolling="yes"
    onmouseover="zxcFadeSS.Pause('slide');"
    onmouseout="zxcFadeSS.Auto('slide');"
    ></a>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    zxcFadeSS.init({
     ID:'slide',        // the unique ID name of the image.                             (string)
     ImageArray:[       // an array defining the slide show images SRCs and link HREFs. (array)
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg","http://childrenshospitalsnationalfoundation.org/Giving_Campaign.html"],
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/StartaClub-1.jpg","http://childrenshospitalsnationalfoundation.org/K.I.D.S.html"],
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/FoodTrucks-1.jpg","http://childrenshospitalsnationalfoundation.org/Food_Truck_Festival.html"],
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/SocialNetwork.jpg","http://childrenshospitalsnationalfoundation.org/Social_Network.html"]
     ],
     FadeDuration:1000, //(optional) the fade duration in milli seconds.                (number, default = 1000)
     HoldDuration:2000,  //(optional) the auto rotation fade duration in milli seconds.  (number, default = FadeDuration)
     AutoStart:2000     //(optional) the delay before starting auto rotation.           (number, default = no auto start)
    })
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    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/

Similar Threads

  1. Replies: 5
    Last Post: 05-23-2011, 06:53 AM
  2. image thumbnail viewer II (set image sizes, default image)
    By ramtanion in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 05-07-2008, 12:26 AM

Bookmarks

Posting Permissions

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