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
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascriptkit slideshow wont work for me in ie

    this cut and paste slideshow is working fine in ie on the javascript toolkit page:
    http://www.javascriptkit.com/script/.../jsslide.shtml however when I try to use it for my friend's site... works fine in firefox, safari, chrome, but not in IE... I cannot for the life of me figure out why... I did need to change the sizes to auto until I get new pictures of his food for his site...

    http://www.olivesovenandgrill.com/slideshow.html

    I put just the code and the references to the photos on this separate page to troubleshoot... any and all help/suggestions would be greatly appreciated.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oh, *PLEASE* do *NOT* use that incredibly bad, incredibly *ANCIENT* script!

    It's a piece of very very outdated junk.

    Just the fact that it uses <script language=...> is enough to tell you to run away.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Here. This needs work, but it's a starting point:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple-minded slideshow</title>
    <style type="text/css">
    * { margin: 0px; }
    
    #simple {
       position: relative;
       width: 400px; height: 340px;
       margin-left: 100px;
    }
    #simple img {
       position: absolute;
       width: 400px; height: 300px;
    }
    #simple div {
       position: absolute;
       width: 400px; height: 30px;
       bottom: 0px;
       text-align: center;
    }
    
    </style>
    </head>
    <body>
    First, a very very simple slide show.  Really really old style, but dirt simple:
    <div id="simple">
        <img />
        <div></div>
    </div>
    
    <script type="text/javascript">
    var imageList = [
        [ "OldBlueEyes.jpg", "Old blue eyes" ],
        [ "Shasta.jpg", "Shasta, the white dasiy" ],
        [ "SignatureCalico.jpg", "Kalico Kitty" ],
        [ "Antidepressant.jpg", "My personal antidepressant" ]
    ];
    
    var curslide = 0;
    var slidediv = document.getElementById("simple");
    var slideimg = slidediv.getElementsByTagName("img")[0];
    var slidetag = slidediv.getElementsByTagName("div")[0];
    
    function nextSlide( )
    {
        var choice = imageList[curslide];
        slideimg.src = "http://www.clearviewarts.com/websize/" + choice[0];
        slidetag.innerHTML = choice[1];
        curslide = ( curslide + 1 ) % imageList.length;
    }
    nextSlide( );
    setInterval( nextSlide, 3000 ); 
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You will find many excellent slideshow 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.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 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>
    </head>
    
    <body>
     Simple Slide Show  with animated fade<br />
     <input type="button" name="" value="GoTo 0" onmouseup="zxcSimpleSlideShow.GoTo('E4',0);" />
     <input type="button" name="" value="GoTo 1" onmouseup="zxcSimpleSlideShow.GoTo('E4',1);" />
     <input type="button" name="" value="GoTo 2" onmouseup="zxcSimpleSlideShow.GoTo('E4',2);" />
     <input type="button" name="" value="GoTo 3" onmouseup="zxcSimpleSlideShow.GoTo('E4',3);" />
     <input type="button" name="" value="Next" onmouseup="zxcSimpleSlideShow.Next('E4',1);" />
     <input type="button" name="" value="Back" onmouseup="zxcSimpleSlideShow.Next('E4',-1);" />
     <br />
     <a><img title="tst" id="E4" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" border="0"  onmouseover="zxcSimpleSlideShow.Pause('E4');" onmouseout="zxcSimpleSlideShow.Auto('E4');" /></a>
     <br /><br />
     Simple Slide Show with animated width<br />
     <input type="button" name="" value="GoTo 0" onmouseup="zxcSimpleSlideShow.GoTo('E5',0);" />
     <input type="button" name="" value="GoTo 1" onmouseup="zxcSimpleSlideShow.GoTo('E5',1);" />
     <input type="button" name="" value="GoTo 2" onmouseup="zxcSimpleSlideShow.GoTo('E5',2);" />
     <input type="button" name="" value="GoTo 3" onmouseup="zxcSimpleSlideShow.GoTo('E5',3);" />
     <input type="button" name="" value="Next" onmouseup="zxcSimpleSlideShow.Next('E5',1);" />
     <input type="button" name="" value="Back" onmouseup="zxcSimpleSlideShow.Next('E5',-1);" />
     <br />
     <br />
     <a><img id="E5" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" border="0"  onmouseover="zxcSimpleSlideShow.Pause('E5');" onmouseout="zxcSimpleSlideShow.Auto('E5');" /></a>
     <br /><br />
     Simple Slide Show with animated height<br />
     <input id="b1" type="button" name="" value="GoTo 0" />
     <input id="b2" type="button" name="" value="GoTo 1" />
     <input id="b3" type="button" name="" value="GoTo 2" />
     <input id="b4" type="button" name="" value="GoTo 3" />
     <input id="b5" type="button" name="" value="Next" />
     <input id="b6" type="button" name="" value="Back" />
     <br />
     <br />
     <a><img id="E6" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" border="0" /></a>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Slide Show
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcSimpleSlideShow={
    
     Next:function(id,ud){
      var o=this[id],ud=(typeof(ud)=='number'&&ud<0?-1:1);
      if (o){
       o.ud=ud;
       this.rotate(o,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=this[id];
      if (o&&o.ary[nu]){
       o.ud=nu>o.cnt?1:-1;
       o.cnt=nu;
       this.rotate(o,nu)
      }
     },
    
     Auto:function(id,ms){
      var o=this[id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this[id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ID,m=o.Mode,ary=o.Imgs,ms=o.Animate,hold=o.Hold,add=o.AddEvents,srt=o.AutoStart,m=typeof(m)=='string'?m.charAt(0).toLowerCase():'',ms=typeof(ms)=='number'&&ms>0?ms:1000,img=document.getElementById(id),src,c=document.createElement('IMG'),e,z0=0,z1=0;
      if (img&&ary instanceof Array){
       c.style.position='absolute';
       c.style.zIndex='101';
       c.style.left='-3000px';
       c.style.top='-3000px';
       document.body.appendChild(c);
       for (;z0<ary.length;z0++){
        src=ary[z0][0];
        ary[z0][0]=new Image();
        ary[z0][0].src=src;
       }
       this[id]={
        id:id,
        img:img,
        a:img.parentNode.nodeName.toUpperCase()=='A'?img.parentNode:null,
        c:[c,m=='w'?'width':m=='h'?'height':m=='h'?'height':''],
        ary:ary,
        lgth:ary.length-1,
        ud:1,
        ms:ms,
        hold:typeof(hold)=='number'&&hold>0?hold:ms*4,
        cnt:0
       }
       if (add instanceof Array){
        for (;z1<add.length;z1++){
         if (add[z0]&&add[z0][0]){
          o=document.getElementById(add[z1][0]);
          e=add[z1][1];
          if (o&&(e=='mouseup'||e=='mousedown'||e=='mouseover'||e=='mouseout'||e=='click')&&this[add[z1][2]]){
           this.addevt(o,e,add[z1][2],id,add[z1][3]);
          }
         }
        }
       }
       this.links(this[id],0);
       typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,auto){
      this.Pause(o.id);
      var p=this.pos(o.img),oop=this,c=o.cnt;
      o.auto=auto===true;
      c=auto===true?c+=o.ud:auto;
      c=c<0?o.lgth:c>o.lgth?0:c;
      o.cnt=c;
      if (o.ary[c][0].width>40){
       this.links(o,c);
       o.c[0].style.width=o.img.width+'px';
       o.c[0].style.height=o.img.height+'px';
       o.c[0].src=o.ary[c][0].src;
       this.animate(o,o.c,0,o.c[1]?o.img[o.c[1]]:100,new Date(),o.ms);
       o.c[0].style.left=p[0]+'px';
       o.c[0].style.top=p[1]+'px';
      }
      else if (o.auto){
       oop.Auto(o.id);
      }
     },
    
     links:function(o,nu){
      o.a?o.a.removeAttribute('href'):null;
      o.a&&o.ary[nu][1]?o.a.href=o.ary[nu][1]:null;
      o.img.removeAttribute('title');
      o.ary[nu][2]?o.img.title=o.ary[nu][2]:null;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[2]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
      }
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
       o.img.src=a[0].src;
       a[0].style.top='-3000px';
       o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     opc: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;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     }
    
    }
    
    zxcSimpleSlideShow.init({
     ID:'E4',      // the unique ID name of the image.                              (string)
     Imgs:[         // an array befining the image SRCs, link HREFs and imahe titles. (array)
      // field 0 = the Image SRC.
      // field 1 = (optional) the Link HREF.
      // field 2 = (optional) the Image title.
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/','Image 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Image 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Image 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Image 4']
     ],
     Animate:1000, //(optional) the animation duration in milli seconds.             (number, default = 1000)
     Mode:'fade',  //(optional) the mode of execution, fade, width or height.        (string, default = fade)
     Hold:2000,     //(optional) the auto rotation 'hold' delay milli seconds.        (number, default = Animate*4)
     AutoStart:500 //(optional) the delay milli seconds before starting auto rotate. (number, default = no auto start)
    });
    
    zxcSimpleSlideShow.init({
     ID:'E5',
     Imgs:[
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/','Image 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Image 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Image 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Image 4']
     ],
     Animate:1000,
     Mode:'width',
     Hold:2000,
     AutoStart:500
    });
    
    zxcSimpleSlideShow.init({
     ID:'E6',       // the unique ID name of the image.                               (string)
     Imgs:[         // an array befining the image SRCs, link HREFs and imahe titles. (array)
      // field 0 = the Image SRC.
      // field 1 = (optional) the Link HREF.
      // field 2 = (optional) the Image title.
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/','Image 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Image 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Image 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Image 4']
     ],
     AddEvents:[    //(optional) an array befining event calls to add.                (array)
     // field 0 = the unique ID name of the element.
     // field 1 = the event type.
     // field 0 = the script function name.
     // field 0 = the parameter to pass to the function.
    
     ['b1','mouseup','GoTo',0],
     ['b2','mouseup','GoTo',1],
     ['b3','mouseup','GoTo',2],
     ['b4','mouseup','GoTo',3],
     ['b5','mouseup','Next',1],
     ['b6','mouseup','Next',-1],
     ['E6','mouseover','Pause'],
     ['E6','mouseout','Auto']
     ],
     Animate:1000,  //(optional) the animation duration in milli seconds.             (number, default = 1000)
     Mode:'height', //(optional) the mode of execution, fade, width or height.        (string, default = fade)
     Hold:2000,     //(optional) the auto rotation 'hold' delay milli seconds.        (number, default = Animate*4)
     AutoStart:500  //(optional) the delay milli seconds before starting auto rotate. (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/

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    And here's a true slide show. In the sense that the images slide across.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple-minded slideshow</title>
    <style type="text/css">
    #peekaboo {
       position: relative;
       width: 400px; height: 300px;
       margin-left: 100px;
       overflow: hidden;
       border: solid brown 3px;
    }
    #peekaboo img {
       position: absolute;
       width: 400px; height: 300px;
    }
    
    </style>
    </head>
    <body>
    <h2> A truly sliding slideshow.</h2>
    <div id="peekaboo">
        <img src= "http://www.clearviewarts.com/websize/OldBlueEyes.jpg" alt="cats" />
        <img src= "http://www.clearviewarts.com/websize/SignatureCalico.jpg" alt="cats" />
        <img src= "http://www.clearviewarts.com/websize/Antidepressant.jpg" alt="cats" />
    </div>
    
    <script type="text/javascript">
    var IMAGEWIDTH = 400; // adjust to match style!
    var PIXELMOVE  = 5;   // adjust these two values...
    var PIXELTIME  = 25;  // ...to adjust the sliding time/rate/smoothness
    var SLIDETIME  = 3000; // time between slide moves
    
    var slidediv = document.getElementById("peekaboo");
    var images = slidediv.getElementsByTagName("img");
    var imagecount = images.length;
    var positions = [ ];
    
    // first, position all images:
    for ( var i = 0; i < imagecount; ++i )
    {    
        images[i].style.left = ( positions[i] = ( i * IMAGEWIDTH ) ) + "px";
    }
    
    var pixels = 0;
    function slideit( )
    {
        pixels += PIXELMOVE;
        for ( var i = 0; i < imagecount; ++i )
        {
            images[i].style.left = ( positions[i] - pixels ) + "px";
        }
        if ( pixels >= IMAGEWIDTH )
        {
            for ( var p = 0; p < imagecount; ++p )
            {
                var left = positions[p] - IMAGEWIDTH;
                if ( left == -IMAGEWIDTH ) left += IMAGEWIDTH * imagecount;
                positions[p] = left;
            }
            pixels = 0;
            setTimeout( slideit, SLIDETIME );
        } else {
            setTimeout( slideit, PIXELTIME );
        }
    }
    setTimeout( slideit, SLIDETIME ); // get started
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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