Blending Slide Show

**hitchdesign** · 06-15-2013, 03:38 PM

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.

**Beverleyh** · 06-15-2013, 03:49 PM

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

**jscheuer1** · 06-15-2013, 04:15 PM

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.

**hitchdesign** · 06-15-2013, 05:25 PM

Originally Posted by Beverleyh

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?

**Beverleyh** · 06-15-2013, 10:24 PM

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.

**jscheuer1** · 06-16-2013, 12:14 AM

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.

**vwphillips** · 06-16-2013, 12:03 PM

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>

Thread: Blending Slide Show

Thread Tools

Search Thread

Blending Slide Show

Similar Threads

Blending Slide Show

Blending Image Slide Show

Blending image slide show

Blending Image Slide Show

Blending Image Slide Show Script

Bookmarks

Bookmarks

Posting Permissions