Javascript to fade between images has stopped working. What have I done wrong?

I must have played with something and now my slide shows, based on a pretty simple fade-in image slideshow script from DynamicDrive have stopped fading. They cycle through each image but there's something wrong with the timer code (it's as if it's not re-firing after the first tick)

You can do a view source on the following page to see the all of the javascript code. I swear this used to work (the images used to fade between each other, now it's just a hard cut) but I must have tweaked something.

http://www.ottawahh.com/jmw/salmon-and-eggs-dec2013/

Any help would be appreciated.
ou81aswellAsked:
Who is Participating?
 
Darrell PorterConnect With a Mentor Enterprise Business Process ArchitectCommented:
Do you have a backup of the version which worked?

Did you recently upgrade your browser version?

I found an example of the original code which, when compared to your code, is not terribly different.

Considering Dynamic Drive no longer publishes the javascript you're using, have you considered upgrading your code to the Ultimate version, located at
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

script language="JavaScript1.2" type="text/javascript">

 /***********************************************
 * Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
 * This notice MUST stay intact for legal use
 * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
 ***********************************************/

 var slideshow_width='600px' //SET IMAGE WIDTH
 var slideshow_height='420px' //SET IMAGE HEIGHT
 var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

 var fadeimages=new Array()
 //SET IMAGE PATHS. Extend or contract array as needed
 fadeimages[0]="__600classtwo666.jpg"
 fadeimages[1]="__600classtwo777.jpg"
 fadeimages[2]="__600classtwohall.jpg"
 fadeimages[3]="__600classtwohallcrop.jpg"
 fadeimages[4]="__600classcroptwo777.jpg"
 fadeimages[5]="__600classinhall333.jpg"
 fadeimages[6]="__600classone111.jpg"
 fadeimages[4]="__600classone555.jpg"



 ////NO need to edit beyond here/////////////

 var preloadedimages=new Array()
 for (p=0;p<fadeimages.length;p++){
 preloadedimages[p]=new Image()
 preloadedimages[p].src=fadeimages[p]
 }

 var ie4=document.all
 var dom=document.getElementById

 if (ie4||dom)
 document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
 else
 document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

 var curpos=10
 var degree=10
 var curcanvas="canvas0"
 var curimageindex=0
 var nextimageindex=1


 function fadepic(){
 if (curpos<100){
 curpos+=10
 if (tempobj.filters)
 tempobj.filters.alpha.opacity=curpos
 else if (tempobj.style.MozOpacity)
 tempobj.style.MozOpacity=curpos/101
 }
 else{
 clearInterval(dropslide)
 nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
 tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
 tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
 nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
 var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
 tempobj2.style.visibility="hidden"
 setTimeout("rotateimage()",pause)
 }
 }

 function rotateimage(){
 if (ie4||dom){
 resetit(curcanvas)
 var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
 crossobj.style.zIndex++
 tempobj.style.visibility="visible"
 var temp='setInterval("fadepic()",50)'
 dropslide=eval(temp)
 curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
 }
 else
 document.images.defaultslide.src=fadeimages[curimageindex]
 curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
 }

 function resetit(what){
 curpos=10
 var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
 if (crossobj.filters)
 crossobj.filters.alpha.opacity=curpos
 else if (crossobj.style.MozOpacity)
 crossobj.style.MozOpacity=curpos/101
 }

 function startit(){
 var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
 crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
 rotateimage()
 }

 if (ie4||dom)
 window.onload=startit
 else
 setInterval("rotateimage()",pause)

 </script>

Open in new window

0
 
ou81aswellAuthor Commented:
Yes. I believe IE got updated from 10 to 11 (actually, from 9 to 11... I had to remove 10 a few months back).

I tried it with Chrome (today) and it didn't work either. I don't think I tested it with Chrome a few weeks ago (Nov 27) as it seemed to work fine in IE9.

I saw the ultimate version and suppose I'll have to update to that given that it seems it was a fluke that it worked before.
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
I use the 'Ultimate' version on quite a few websites and it works well.

PS: I get the crossfade in IE8 but not in Firefox.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Darrell PorterConnect With a Mentor Enterprise Business Process ArchitectCommented:
It works in IE8 and IE9 if you put the browser in compatibility mode, allow transitions.  Once I did this, the image transitions became visible.
0
 
Hiran DesaiConnect With a Mentor Solution ArchitectCommented:
I need to deep thorugh your script..but any way I found the problem.
It's with script.....

 function fadepic(){
 if (curpos<100){
 curpos+=10
 if (tempobj.filters)
 tempobj.filters.alpha.opacity=curpos
 else if (tempobj.style.MozOpacity)
 tempobj.style.MozOpacity=curpos/101
 }
 else{
 clearInterval(dropslide)
 nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
 tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
 tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
 nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
 var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
 tempobj2.style.visibility="hidden"
 setTimeout("rotateimage()",pause)
 }
 }

Open in new window


tempobj which is your div elements with ID as 'Canvas' and that does not support hence they are returned as undefined
neither style property of filter nor style.MozOpacity (which i had found from firfox.).

Hence you need to change it to opacity/RGBA .
Hope this is helpful
Link that may help you but Opacity/Filters
0
 
ou81aswellAuthor Commented:
Thanks guys. I implemented the updated version of the Ultimate Fade-in slideshow (v2.4).

http://www.ottawahh.com/jmw/salmon-and-eggs-dec2013/
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome, I'll be over for breakfast tomorrow!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.