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.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 54
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Simple non-preload slideshow with fade and pause

    I am a newbie to javascript. I am looking for a simple (non-jquery) image slideshow that has pause-on-hover (or similar), fading, plus on-demand loading of the images (there will be too many images to preload the lot).

    I have searched this forum and lots of other places without success.

    I found a beautiful little on-demand-loading script at http://www.javascriptkit.com/script/...entslide.shtml but it does not do fading and cannot be paused. Here it is (cut down):

    Code:
    <html>
    <head>
    <title>Slideshow with load on demand</title>
    </head>
    <body>
    <SCRIPT LANGUAGE="JavaScript">
    src = ["pic1.jpg", "pic2.jpg", "pic3.jpg"]
    duration = 1;
    ads=[]; ct=0;
    function switchAd() {
    var n=(ct+1)%src.length;
    if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
    document["Ad_Image"].src = ads[ct=n].src;
    }
    ads[n=(ct+1)%src.length] = new Image;
    ads[n].src = src[n];
    setTimeout("switchAd()",duration*1000);
    }
    onload = function(){
    if (document.images)
    switchAd();
    }
    </SCRIPT>
    <IMG NAME="Ad_Image" SRC="pic1.jpg" BORDER=0>
    </body>
    </html>
    They have another one here: http://www.javascriptkit.com/script/...2/3slide.shtml
    that can be paused and restarted etc. which would be acceptable instead of hovering to pause.

    Neither of them do fading but lots of others I have looked at do. So What I need is the above two combined, but with fading.

    Does anyone have a link to a page that has that please?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Have a look at the many excellent scripts at
    http://www.vicsjavascripts.org.uk/

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Lots of good scripts there. Unfortunately they are all far more complex than what I want and none do what I need. It is aimed mainly at doing all sorts of fancy fades etc. I just want a small one with those three basic features.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    What you are asking for is not quite as simple and straightforward as you imagine. jQuery might be a better choice.

    To give you a start, have a look at

    Slide show pause on hover issue Post#5

    You say you have too many images to preload the lot. That is bound to result in a poor user experience. You should preload a few images and then continue preloading the others as the viewing proceeds.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Aug 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for that link. The script there combines fading and pausing, but unfortunately preloads the images, which is not what I want. I have already found quite a few scripts like that. eg. http://www.menucool.com/javascript-image-slider (The fading on the menucool one is much better than in the link above.)

    The writeup on the non-preloading script I included above says that it loads the next image while the current image is being displayed. If that is true (most of the time) then the user experience should be ok.

    The problem with preloading large collections is that the user experience is non-existent. That is to say most users will get sick of waiting and leave the page before the slideshow even starts.
    Last edited by pmolsen; 08-08-2012 at 08:15 AM.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    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>
    </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 />
    <a href="URL1.htm"><img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="200" height="150" border="0"
    onmouseover="zxcFade.Pause('tst');"
    onmouseout="zxcFade.Auto('tst');"
     /></a>
     <br />
    <img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="200" height="150" border="0"  />
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Fade Slide Show with image load on demand (07-August-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFade={
    
     init:function(o){
      var oop=this,id=o.ImageID,img=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,ld=o.LoadDuration,clone=document.createElement('IMG'),src,z0=0;
      for (;z0<ary.length;z0++){
       ary[z0][2]=new Image();
      }
      clone.style.position='absolute';
      clone.style.zIndex='1001';
      clone.style.left='-3000px';
      clone.style.top='-3000px';
      document.body.appendChild(clone);
      this['zxc'+id]={
      id:id,
       ary:o.ImageArray,
       clone:clone,
       img:img,
       a:img.parentNode,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*4,
       ld:typeof(ld)=='number'?ld*1000:5000,
       cnt:0
      }
      clone.onmouseover=function(){ oop.Pause(id); }
      clone.onmouseout=function(){ oop.Auto(id); }
      this.Auto(id,o.hold);
     },
    
     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){
      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,auto){
      var oop=this,xy=this.pos(o.img);
      this.Pause(o.id);
      o.auto=auto===true;
      if (o.auto){
       o.cnt=++o.cnt%o.ary.length;
      }
      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;
      }
      clearTimeout(o.dly);
      this.animate(o,0,100,new Date(),o.ms);
      o.clone.src=o.ary[o.cnt][0];
      o.clone.style.left=xy[0]+'px';
      o.clone.style.top=xy[1]+'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);
      }
      oop.rotate(o,o.auto);
     },
    
     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){
        this.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;
     }
    }
    
    zxcFade.init({
     ImageID:'tst',     // the unique ID name of the image.                         (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/Egypt5.jpg','URL1.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','URL2.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','URL3.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','URL4.htm']
     ],
     LoadDuration:5,    //(optional) the time allowed to load the images seconds.   (number), default = 5)
     FadeDuration:500,  //(optional) the fade duration im illi seconds.             (number), default = 1000)
     HoldDuration:2000  //(optional) the auto rotate hold duration im illi seconds. (number), default = 1000)
    });
    
    zxcFade.init({
     ImageID:'tst2',     // the unique ID name of the image.                         (string)
     ImageArray:[       // an array defining the slide show images and link hrefs.  (array)
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/BadImage.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg']
     ]
    });
    
    
    
    /*]]>*/
    </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/

  • #7
    New Coder
    Join Date
    Aug 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey you are brilliant Vic! That is exactly what I was after thanks.

    Ok, here's pushing my luck. What about one with radio buttons like this one please: http://www.menucool.com/slider/javas...e-slider-demo1

    With a large photo collection there is not enough room for the bigger buttons, even when I changed them to just said 0, 1, 2.... Also it allows you to see where you are up to in the sequence.

    I would have tried to hack it myself but unfortunately his main script is obfuscated.

    I don't want the fancy fades etc. I think most people find them distracting and annoying. Just the little round circles - which are clickable.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    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[*/
    #paginate {
    
    }
    
    #paginate DIV{
     width:20px;height:20px;background-Color:red;float:left;margin-Left:5px;
    }
    
    #paginate .active {
      background-Color:green;
    }
    
    /*]]>*/
    </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>
    <a href="URL1.htm"><img id="tst" 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 id="paginate" >
      <div class="active" onmouseup="zxcFade.GoTo('tst',0);" ></div>
      <div onmouseup="zxcFade.GoTo('tst',1);" ></div>
      <div onmouseup="zxcFade.GoTo('tst',2);" ></div>
      <div onmouseup="zxcFade.GoTo('tst',3);" ></div>
    
    </div>
    </div>
     <br /><br />
    
    <img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="200" height="150" border="0"  />
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Fade Slide Show with image load on demand and pagination (08-August-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFade={
    
     init:function(o){
      var oop=this,id=o.ImageID,img=document.getElementById(id),pag=document.getElementById(o.PaginateID),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,ld=o.LoadDuration,clone=document.createElement('IMG'),src,z0=0;
      for (;z0<ary.length;z0++){
       ary[z0][2]=new Image();
      }
      clone.style.position='absolute';
      clone.style.zIndex='1001';
      clone.style.left='-3000px';
      clone.style.top='-3000px';
      document.body.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
      }
      clone.onmouseover=function(){ oop.Pause(id); }
      clone.onmouseout=function(){ oop.Auto(id); }
      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){
      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;
      }
      this.ready(o);
     },
    
     ready:function(o){
      var oop=this,xy=this.pos(o.img);
      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,0,100,new Date(),o.ms);
      o.clone.src=o.ary[o.cnt][0];
      o.clone.style.left=xy[0]+'px';
      o.clone.style.top=xy[1]+'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,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){
        this.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;
     }
    }
    
    zxcFade.init({
     ImageID:'tst',     // the unique ID name of the image.                                       (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']
     ],
     PaginateID:'paginate', //(optional) the unique ID name of the parinate elements parent Node. (string), default = no pagination)
     LoadDuration:5,    //(optional) the time allowed to load the images seconds.                 (number), default = 5)
     FadeDuration:500,  //(optional) the fade duration im illi seconds.                           (number), default = 1000)
     HoldDuration:2000  //(optional) the auto rotate hold duration im illi seconds.               (number), default = 1000)
    });
    
    zxcFade.init({
     ImageID:'tst2',     // the unique ID name of the image.                         (string)
     ImageArray:[       // an array defining the slide show images and link hrefs.  (array)
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/BadImage.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg']
     ]
    });
    
    
    
    /*]]>*/
    </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/

  • Users who have thanked vwphillips for this post:

    pmolsen (08-09-2012)

  • #9
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP 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">

    <
    head>
    <
    meta content="en-us" http-equiv="Content-Language" />
    <
    meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <
    title>Rotate in Background</title>

    <
    SCRIPT type=text/javascript>

     
    var 
    fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["rotate1.jpg"""""//plain image syntax
    fadeimages[1]=["rotate2.jpg""javascript:void(window.open('rotate2.jpg','','width=1000, height=800'));"""//image with link syntax
    fadeimages[2]=["rotate3.jpg""http://www.javascriptkit.com""_new"//image with link and target syntax
     
    var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages2[0]=["rotate1.jpg"""""//plain image syntax
    fadeimages2[1]=["rotate2.jpg""http://www.cssdrive.com"""//image with link syntax
    fadeimages2[2]=["rotate3.jpg""http://www.javascriptkit.com""_new"//image with link and target syntax
     
    var fadebgcolor="white"
     
    ////NO need to edit beyond here/////////////
     
    var fadearray=new Array() //array to cache fadeshow instances
    var fadeclear=new Array() //array to cache corresponding clearinterval pointers
     
    var dom=(document.getElementById//modern dom browsers
    var iebrowser=document.all
     
    function fadeshow(theimagesfadewidthfadeheightborderwidthdelaypausedisplayorder){
    this.pausecheck=pause
    this
    .mouseovercheck=0
    this
    .delay=delay
    this
    .degree=10 //initial opacity degree (10%)
    this.curimageindex=0
    this
    .nextimageindex=1
    fadearray
    [fadearray.length]=this
    this
    .slideshowid=fadearray.length-1
    this
    .canvasbase="canvas"+this.slideshowid
    this
    .curcanvas=this.canvasbase+"_0"
    this.theimages=theimages
    if (typeof displayorder!="undefined")
    this.theimages.sort(function() {return 0.5 Math.random();}) //thanks to Mike (aka Mwinter) :)
    this.imageborder=parseInt(borderwidth)
    this.postimages=new Array() //preload images
    for (p=0;p<theimages.length;p++){
    this.postimages[p]=new Image()
    this.postimages[p].src=this.theimages[p][0]
    }
     
    var 
    fadewidth=fadewidth+this.imageborder*2
    var fadeheight=fadeheight+this.imageborder*2
     
    if (iebrowser&&dom||dom//if IE5+ or modern browsers (ie: Firefox)
    document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
    else
    document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
     
    if (
    iebrowser&&dom||dom//if IE5+ or modern browsers such as Firefox
    this.startit()
    else{
    this.curimageindex++
    setInterval("fadearray["+this.slideshowid+"].rotateimage()"this.delay)
    }
    }

    function 
    fadepic(obj){
    if (
    obj.degree<100){
    obj.degree+=10
    if (obj.tempobj.filters&&obj.tempobj.filters[0]){
    if (
    typeof obj.tempobj.filters[0].opacity=="number"//if IE6+
    obj.tempobj.filters[0].opacity=obj.degree
    else //else if IE5.5-
    obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
    }
    else if (
    obj.tempobj.style.MozOpacity)
    obj.tempobj.style.MozOpacity=obj.degree/101
    else if (obj.tempobj.style.KhtmlOpacity)
    obj.tempobj.style.KhtmlOpacity=obj.degree/100
    else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
    obj.tempobj.style.opacity=obj.degree/101
    }
    else{
    clearInterval(fadeclear[obj.slideshowid])
    obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" obj.canvasbase+"_1"
    obj.tempobj=iebrowseriebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
    obj.populateslide(obj.tempobjobj.nextimageindex)
    obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+0
    setTimeout
    ("fadearray["+obj.slideshowid+"].rotateimage()"obj.delay)
    }
    }
     
    fadeshow.prototype.populateslide=function(picobjpicindex){
    var 
    slideHTML=""
    slideHTML+='<table style="height:100%;background-image:url('+this.postimages[picindex].src+');">'
    slideHTML+='<tr><td style="vertical-align:middle;color:hotpink;font-weight:bold;font-size:110%;">Here is a long bit of text that I want to have see what happens to it when this script runs</td></tr>'
    slideHTML+='</table>'
    picobj.innerHTML=slideHTML
    }
     
     
    fadeshow.prototype.rotateimage=function(){
    if (
    this.pausecheck==1//if pause onMouseover enabled, cache object
    var cacheobj=this
    if (this.mouseovercheck==1)
    setTimeout(function(){cacheobj.rotateimage()}, 100)
    else if (
    iebrowser&&dom||dom){
    this.resetit()
    var 
    crossobj=this.tempobj=iebrowseriebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    crossobj.style.zIndex++
    fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
    this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" this.canvasbase+"_0"
    }
    else{
    var 
    ns4imgobj=document.images['defaultslide'+this.slideshowid]
    ns4imgobj.src=this.postimages[this.curimageindex].src
    }
    this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+0
    }
     
    fadeshow.prototype.resetit=function(){
    this.degree=10
    var crossobj=iebrowseriebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    if (
    crossobj.filters&&crossobj.filters[0]){
    if (
    typeof crossobj.filters[0].opacity=="number"//if IE6+
    crossobj.filters(0).opacity=this.degree
    else //else if IE5.5-
    crossobj.style.filter="alpha(opacity="+this.degree+")"
    }
    else if (
    crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=this.degree/101
    else if (crossobj.style.KhtmlOpacity)
    crossobj.style.KhtmlOpacity=this.degree/100
    else if (crossobj.style.opacity&&!crossobj.filters)
    crossobj.style.opacity=this.degree/101
    }
     
     
    fadeshow.prototype.startit=function(){
    var 
    crossobj=iebrowseriebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    this.populateslide(crossobjthis.curimageindex)
    if (
    this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
    var cacheobj=this
    var crossobjcontainer=iebrowseriebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
    crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
    crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
    }
    this.rotateimage()
    }
     
    </SCRIPT>

    </head>
    <body>
    <table style="width: 1000px;" align="center" cellpadding="0" cellspacing="0"> 
    <tr>
    <td>
            
    <div style="width:1000px;height:800px;position:relative;">
    <div style="position:absolute;top:0;left:0;">
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 1000, 800, 0, 4000, 0) 
    </script>
    </div>
    <table style="position:absolute;top:0;left:0;z-index:300000;"><tr><td>whatever you like can be placed here!!!</td></tr></table>
    </div>

    </td>
    </tr>
    </table>
    </body>
    </html> 

    Best Regards,
    Navin Patel
    Last edited by VIPStephan; 08-09-2012 at 02:05 PM. Reason: added code BB tags and removed fake signature

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. It should be blindingly obvious why this is necessary. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    New Coder
    Join Date
    Aug 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much once again Vic. Almost exactly what I was after. I did make one small change to your code however to fit exactly with what I wanted, namely the little icons instead of the red and green squares.

    I changed the "paginate" CSS definition in the header to the following:

    Code:
    #paginate {
    
    }
    #paginate DIV{
     width:11px;height:11px;background-image:url('bulletoff.png');float:left;margin-Left:5px;margin-top:20px;
    }
    
    #paginate .active {
      background-image:url('bulleton.png');
    }
    I then created two bullets as per the attached. I also renamed the array from "tst" to "images" and also removed the second slideshow. More than one is too confusing. The complete code for the benefit of others is as below (plus the icons need to be in the same folder.)

    Oops, just noticed one slight problem with the original (and mine). The first image just flashes up for a very short time, then it goes to image 2.

    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[*/
    #paginate {
    
    }
    
    #paginate DIV{
     width:11px;height:11px;background-image:url('bulletoff.png');float:left;margin-Left:5px;margin-top:20px;
    }
    
    #paginate .active {
      background-image:url('bulleton.png');
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <br />
    <br />
    <div>
    <a href="URL1.htm"><img id="images" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="200" height="150" border="0"
    onmouseover="zxcFade.Pause('images');"
    onmouseout="zxcFade.Auto('images');"
     /></a>
    <div id="paginate" >
      <div class="active" onmouseup="zxcFade.GoTo('images',0);" ></div>
      <div onmouseup="zxcFade.GoTo('images',1);" ></div>
      <div onmouseup="zxcFade.GoTo('images',2);" ></div>
      <div onmouseup="zxcFade.GoTo('images',3);" ></div>
    
    </div>
    </div>
     <br /><br />
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Fade Slide Show with image load on demand and pagination (08-August-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFade={
    
     init:function(o){
      var oop=this,id=o.ImageID,img=document.getElementById(id),pag=document.getElementById(o.PaginateID),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?
    
    ms:1000,ld=o.LoadDuration,clone=document.createElement('IMG'),src,z0=0;
      for (;z0<ary.length;z0++){
       ary[z0][2]=new Image();
      }
      clone.style.position='absolute';
      clone.style.zIndex='1001';
      clone.style.left='-3000px';
      clone.style.top='-3000px';
      document.body.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
      }
      clone.onmouseover=function(){ oop.Pause(id); }
      clone.onmouseout=function(){ oop.Auto(id); }
      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){
      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;
      }
      this.ready(o);
     },
    
     ready:function(o){
      var oop=this,xy=this.pos(o.img);
      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,0,100,new Date(),o.ms);
      o.clone.src=o.ary[o.cnt][0];
      o.clone.style.left=xy[0]+'px';
      o.clone.style.top=xy[1]+'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,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){
        this.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;
     }
    }
    
    zxcFade.init({
     ImageID:'images',     // the unique ID name of the image.                                       (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']
     ],
     PaginateID:'paginate', //(optional) the unique ID name of the parinate elements parent Node. (string), default = no pagination)
     LoadDuration:5,    //(optional) the time allowed to load the images seconds.                 (number), default = 5)
     FadeDuration:500,  //(optional) the fade duration im illi seconds.                           (number), default = 1000)
     HoldDuration:2000  //(optional) the auto rotate hold duration im illi seconds.               (number), default = 1000)
    });
    
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Attached Images Attached Images   

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    try

    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[*/
    #paginate {
    
    }
    
    #paginate DIV{
     width:20px;height:20px;background-Color:red;float:left;margin-Left:5px;
    }
    
    #paginate .active {
      background-Color:green;
    }
    
    /*]]>*/
    </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>
    <a href="URL1.htm"><img id="tst" 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 id="paginate" >
      <div class="active" onmouseup="zxcFade.GoTo('tst',0);" ></div>
      <div onmouseup="zxcFade.GoTo('tst',1);" ></div>
      <div onmouseup="zxcFade.GoTo('tst',2);" ></div>
      <div onmouseup="zxcFade.GoTo('tst',3);" ></div>
    
    </div>
    </div>
     <br /><br />
    
    <img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="200" height="150" border="0"  />
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Fade Slide Show with image load on demand and pagination (09-August-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFade={
    
     init:function(o){
      var oop=this,id=o.ImageID,img=document.getElementById(id),pag=document.getElementById(o.PaginateID),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,ld=o.LoadDuration,clone=document.createElement('IMG'),src,z0=0;
      for (;z0<ary.length;z0++){
       ary[z0][2]=new Image();
      }
      clone.style.position='absolute';
      clone.style.zIndex='1001';
      clone.style.left='-3000px';
      clone.style.top='-3000px';
      document.body.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
      }
      clone.onmouseover=function(){ oop.Pause(id); }
      clone.onmouseout=function(){ oop.Auto(id); }
      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,xy=this.pos(o.img);
      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,0,100,new Date(),o.ms);
      o.clone.style.left=xy[0]+'px';
      o.clone.style.top=xy[1]+'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,f,t,srt,mS){
      var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       oop.opac(obj,now);
      }
      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){
        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;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    }
    
    zxcFade.init({
     ImageID:'tst',     // the unique ID name of the image.                                       (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']
     ],
     PaginateID:'paginate', //(optional) the unique ID name of the parinate elements parent Node. (string), default = no pagination)
     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)
    });
    
    //zxcFade.init({
    // ImageID:'tst2',     // the unique ID name of the image.                         (string)
    // ImageArray:[       // an array defining the slide show images and link hrefs.  (array)
    //  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg'],
    //  ['http://www.vicsjavascripts.org.uk/StdImages/BadImage.jpg'],
    //  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'],
    //  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg']
    // ]
    //});
    
    
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 08-09-2012 at 02:41 PM.
    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/

  • #13
    New Coder
    Join Date
    Aug 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    No difference. The first slide still only stays there for a split second.

    Tested on Chrome, IE, Firefox and Opera.

  • #14
    New Coder
    Join Date
    Aug 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    One other minor problem sorry. After clicking on one of the bullets the display stops. It should go to that picture then continue from there like: http://www.menucool.com/slider/javas...e-slider-demo1

    If the user wants it to stay on that picture they hover over it with the mouse.

  • #15
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    please post a link to your page as I cant see your problems locally
    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/


  •  
    Page 1 of 4 123 ... LastLast

    Posting Permissions

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