[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 263
  • Last Modified:

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.
0
ou81aswell
Asked:
ou81aswell
  • 2
  • 2
  • 2
  • +1
4 Solutions
 
WalkaboutTiggerCommented:
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 BaldwinFixer 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
WalkaboutTiggerCommented:
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 DesaiSolution 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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now