Results 1 to 7 of 7

Thread: Blending Slide Show

  1. #1
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Blending Slide Show

    1) Blending Slide Show

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/image4.htm

    3) Describe problem: This script was working fine for home page on www.thomaswaltonmanor.com and www.dragstrastables.com but now is not working.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    As you say, the script works fine on the 2 linked pages provided (at least it does on iPhone), but help cannot be given on an unknown issue.

    If you need help, you must;

    1. Provide a link to the problematic page.

    2. Describe what is not working on that problematic page.

    3. Advise which browser the script does not work in.

    It may also be helpful to provide a stripped-back version of the problematic page, if that page contains a lot of code.

    EDIT: As the script youre using is very old, its probably worth upgrading to something that's more modern and robust - try this: http://www.dynamicdrive.com/dynamici...nslideshow.htm
    Last edited by Beverleyh; 06-15-2013 at 03:57 PM. Reason: Upgrade recommended
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Starting with IE 10, this script no longer works. If you force IE 9 or less mode, it will work but there are no blending effects.

    As Beverleyh suggests, update to a more modern slideshow.
    - John
    ________________________

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

  4. #4
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    As you say, the script works fine on the 2 linked pages provided (at least it does on iPhone), but help cannot be given on an unknown issue.

    If you need help, you must;

    1. Provide a link to the problematic page.

    2. Describe what is not working on that problematic page.

    3. Advise which browser the script does not work in.

    It may also be helpful to provide a stripped-back version of the problematic page, if that page contains a lot of code.

    EDIT: As the script youre using is very old, its probably worth upgrading to something that's more modern and robust - try this: http://www.dynamicdrive.com/dynamici...nslideshow.htm
    The home page for both sites are at issue. www.thomaswaltonmanor.com/index.html and www.drgstrables.com/index.html.

    I looked at your suggested upgrade and it looks like it may be way over my head to install but I will try. Are there any newer versions of the script I am currently using that will work in IE10?

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Code:
     Are there any newer versions of the script I am currently using that will work in IE10?
    I don't imagine so - unless someone were to offer to upgrade as a side project - but thats unlikely because there are already better and more robust scripts on the web that achieve the same/similar effect and are more compatible with newer web browsers.

    It really is a better option to upgrade and embrace the improvements that newer web technologies have to offer.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    In most cases you will be better off with a more advanced slideshow like:

    http://www.dynamicdrive.com/dynamici...army/index.htm

    or (the one Beverley mentioned):

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

    But I can understand not feeling confident trying a new script. Here's a version of the one you're using that 'works' (no blending, just a plain slideshow) in IE 10:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    //*****************************************
    // Blending Image Slide Show Script- 
    //  Dynamic Drive (www.dynamicdrive.com)
    // For full source code, visit http://www.dynamicdrive.com/
    //*****************************************
    
    //specify interval between slide (in mili seconds)
    var slidespeed=3000
    
    //specify images
    var slideimages=new Array("image1.gif","image2.gif","image3.gif")
    
    //specify corresponding links
    var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com")
    
    var newwindow=1 //open links in new window? 1=yes, 0=no
    
    var imageholder=new Array()
    for (i=0;i<slideimages.length;i++){
    imageholder[i]=new Image()
    imageholder[i].src=slideimages[i]
    }
    
    function gotoshow(){
    if (newwindow)
    window.open(slidelinks[whichlink])
    else
    window.location=slidelinks[whichlink]
    }
    
    </script>
    </head>
    <body>
    <a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
    
    <script type="text/javascript">
    
    var whichlink=0
    var whichimage=0
    var blenddelay=(document.images.slide.filters)? document.images.slide.filters[0].duration*1000 : 0
    function slideit(){
    if (!document.images) return
    if (document.images.slide.filters) document.images.slide.filters[0].apply()
    document.images.slide.src=imageholder[whichimage].src
    if (document.images.slide.filters) document.images.slide.filters[0].play()
    whichlink=whichimage
    whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
    setTimeout("slideit()",slidespeed+blenddelay)
    }
    slideit()
    
    </script>
    
    <p align="center"><font face="arial" size="-2">This free script provided by<br>
    <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
    </body>
    </html>
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    Any questions, feel free to ask.
    Last edited by jscheuer1; 06-16-2013 at 01:07 AM. Reason: details
    - John
    ________________________

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

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    a slide show with your HTML using the image ID and with 3 possible effects

    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 id="E4" src="http://www.thomaswaltonmanor.com/images/java5.jpg" alt="Thomas Walton Manor" name="slide" width="402" height="288" vspace="8" border="0" id="slide" style="filter:blendTrans(duration=2)" /></a><br />
                  <a><img id="E5" src="http://www.thomaswaltonmanor.com/images/java5.jpg" alt="Thomas Walton Manor" name="slide" width="402" height="288" vspace="8" border="0" id="slide" style="filter:blendTrans(duration=2)" /></a><br />
                  <a><img id="E6" src="http://www.thomaswaltonmanor.com/images/java5.jpg" alt="Thomas Walton Manor" name="slide" width="402" height="288" vspace="8" border="0" id="slide" style="filter:blendTrans(duration=2)" /></a><br />
    
    <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;
       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.thomaswaltonmanor.com/images/java1.jpg','http://www.vicsjavascripts.org.uk/','Image 1'],
     ['http://www.thomaswaltonmanor.com/images/java2.jpg','http://www.vicsjavascripts.org.uk/','Image 2'],
     ['http://www.thomaswaltonmanor.com/images/java3.jpg','http://www.vicsjavascripts.org.uk/','Image 3'],
     ['http://www.thomaswaltonmanor.com/images/java4.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.thomaswaltonmanor.com/images/java1.jpg','http://www.vicsjavascripts.org.uk/','Image 1'],
     ['http://www.thomaswaltonmanor.com/images/java2.jpg','http://www.vicsjavascripts.org.uk/','Image 2'],
     ['http://www.thomaswaltonmanor.com/images/java3.jpg','http://www.vicsjavascripts.org.uk/','Image 3'],
     ['http://www.thomaswaltonmanor.com/images/java4.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.thomaswaltonmanor.com/images/java1.jpg','http://www.vicsjavascripts.org.uk/','Image 1'],
     ['http://www.thomaswaltonmanor.com/images/java2.jpg','http://www.vicsjavascripts.org.uk/','Image 2'],
     ['http://www.thomaswaltonmanor.com/images/java3.jpg','http://www.vicsjavascripts.org.uk/','Image 3'],
     ['http://www.thomaswaltonmanor.com/images/java4.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/

Similar Threads

  1. Blending Slide Show
    By farmwife in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 06-03-2007, 02:23 AM
  2. Blending Image Slide Show
    By edandrea in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 05-03-2007, 05:28 PM
  3. Blending image slide show
    By ponygirl in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-18-2006, 09:34 PM
  4. Blending Image Slide Show
    By BLiZZaRD in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 06-05-2006, 10:02 PM
  5. Blending Image Slide Show Script
    By mb716 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-04-2005, 04:47 PM

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
  •