Advanced Search

Results 1 to 3 of 3

Thread: Image slide

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

    Cool Image slide

    Hello,

    I have made a website and in it I have images which fade into the next one. If this doesnt make sense This is the website:

    http://strawberrybathrooms.co.uk/

    I have made this using flash and I am trying to get away from the flash for SEO purposes. I wondered if it was possible to do something similar using CSS and Java Script if need to be.

    If so how will I go about doing it?

    Gemma

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    Something similar would be:

    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    But it wouldn't get you much in the way of SEO unless you added markup in the page for non-javascript users. With this script that's fairly easy to do, see:

    http://www.dynamicdrive.com/forums/s...ad.php?t=69737

    for details.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 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>
    <style type="text/css">
    /*<![CDATA[*/
    #parent {
     position:relative;width:200px;height:150px;border:solid red 1px;
    }
    
    
    .mask {
      position:absolute;z-Index:4;left:0px;top:-50px;width:100%;height:20px;background-Color:#99FFFF;text-Align:center;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <input type="button" name="" value="GoTo 0" onmouseup="zxcFade.GoTo('tst',0);" />
    <input type="button" name="" value="GoTo 1" onmouseup="zxcFade.GoTo('tst',1);" />
    <input type="button" name="" value="GoTo 2" onmouseup="zxcFade.GoTo('tst',2);" />
    <input type="button" name="" value="GoTo 3" onmouseup="zxcFade.GoTo('tst',3);" />
    <br />
    <br />
    <div id="parent" >
    <div class="mask" ><a>My Message</a></div>
    <a href="URL1.htm"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="200" height="150" border="0"
    onmouseover="zxcFade.Pause('tst');"
    onmouseout="zxcFade.Auto('tst');"
     /></a>
    </div>
     <br /><br />
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Fade Slide Show with image load on demand and pagination and slide in message (09-August-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFade={
    
     init:function(o){
      var oop=this,id=o.ParentID,obj=document.getElementById(id),img=obj.getElementsByTagName('IMG')[0],pag=document.getElementById(o.PaginateID),slide=obj.getElementsByTagName('DIV')[0],ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,sms=o.SlideDuration,shold=o.SlideHold,ld=o.LoadDuration,clone=document.createElement('IMG'),src,z0=0;
      obj.style.overflow='hidden';
      for (;z0<ary.length;z0++){
       ary[z0][2]=new Image();
      }
      clone.style.position='absolute';
      clone.style.zIndex='1';
      clone.style.left='-3000px';
      clone.style.top='-3000px';
      obj.appendChild(clone);
      this['zxc'+id]={
      id:id,
       ary:o.ImageArray,
       clone:clone,
       img:img,
       a:img.parentNode,
       pag:pag?pag.getElementsByTagName('*'):[],
       lst:0,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*4,
       ld:typeof(ld)=='number'?ld*1000:5000,
       cnt:0,
       slide:slide
      }
      clone.onmouseover=function(){ oop.Pause(id); }
      clone.onmouseout=function(){ oop.Auto(id); }
      if (slide){
       setTimeout(function(){ oop.animate(o,slide,slide.offsetTop,0,new Date(),typeof(sms)=='number'?sms:1000,'dly2'); },typeof(shold)=='number'?shold:1000);
      }
      this.Auto(id,o.hold);
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){
        o.cnt=++o.cnt%o.ary.length;
        o.auto=true;
        oop.rotate(o);
       },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       o.auto=false;
       clearTimeout(o.to);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.id);
       if (o.ary[nu]&&nu!=o.cnt){
        o.cnt=nu;
        this.rotate(o,false);
       }
      }
     },
    
     rotate:function(o){
      this.opac(o.clone,0);
      if (o.ary[o.cnt][2].width<40){
       o.ary[o.cnt][2].src=o.ary[o.cnt][0];
       this.load(o,new Date());
       return;
      }
      o.clone.src=o.ary[o.cnt][0];
      this.ready(o);
     },
    
     ready:function(o){
      var oop=this;
      clearTimeout(o.dly);
      if (o.pag[o.lst]){
       o.pag[o.lst].className='';
    
      }
      if (o.pag[o.cnt]){
       o.pag[o.cnt].className='active';
      }
      o.lst=o.cnt;
      this.animate(o,null,0,100,new Date(),o.ms,'dly');
      o.clone.style.left=o.img.offsetLeft+'px';
      o.clone.style.top=o.img.offsetTop+'px';
      o.clone.style.width=o.img.width+'px';
      o.clone.style.height=o.img.height+'px';
      o.a.removeAttribute('href');
      if (o.ary[o.cnt][1]){
       o.a.href=o.ary[o.cnt][1];
      }
     },
    
     load:function(o,d){
      var oop=this;
      if (o.ary[o.cnt][2].width<40&&new Date()-d<o.ld){
       o.to=setTimeout(function(){  oop.load(o,d); },100);
       return;
      }
      if (o.ary[o.cnt][2].width<40){
       o.ary.splice(o.cnt,1);
       o.cnt=o.ary[o.cnt]?o.cnt:0;
      }
      this.rotate(o);
     },
    
     animate:function(o,slide,f,t,srt,mS,to){
      var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       if (!slide){
        oop.opac(obj,now);
       }
       else {
        slide.style.top=now+'px';
       }
      }
      if (ms<mS){
       o[to]=setTimeout(function(){ oop.animate(o,slide,f,t,srt,mS,to); },10);
      }
      else {
       if (slide){
        slide.style.top=t+'px';
       }
       else {
        o.img.src=obj.src;
        obj.style.left='-3000px';
        if (o.auto){
         this.Auto(o.id,o.hold);
        }
       }
      }
     },
    
     opac:function(obj,now){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
     }
    
    
     }
    
    zxcFade.init({
     ParentID:'parent',     // the unique ID name of the parent DIV.                                       (string)
     ImageArray:[       // an array defining the slide show images and link hrefs.                (array)
      // field 0 = the image src.                    (string)
      // field 1 = (optional) the image link href.  (string,default = no link href)
      ['http://www.vicsjavascripts.org.uk/StdImages/One.gif','URL1.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Two.gif','URL2.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Three.gif','URL3.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Four.gif','URL4.htm']
     ],
     LoadDuration:5,    //(optional) the time allowed to load the images seconds.                 (number), default = 5)
     FadeDuration:1500,  //(optional) the fade duration im illi seconds.                           (number), default = 1000)
     HoldDuration:2000,  //(optional) the auto rotate hold duration im illi seconds.               (number), default = 1000)
     SlideDuration:1000,  //(optional) the auto rotate hold duration im illi seconds.               (number), default = 1000)
     SlideHold:2000     //(optional) the auto rotate hold duration im illi seconds.               (number), default = 1000)
    
    });
    
    
    
    
    /*]]>*/
    </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/

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
  •