Solved

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

Posted on 2013-12-11
7
249 Views
Last Modified: 2013-12-12
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
Comment
Question by:ou81aswell
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 15

Accepted Solution

by:
WalkaboutTigger earned 250 total points
ID: 39713056
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
 

Author Comment

by:ou81aswell
ID: 39713081
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 total points
ID: 39713089
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 15

Assisted Solution

by:WalkaboutTigger
WalkaboutTigger earned 250 total points
ID: 39713340
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
 
LVL 4

Assisted Solution

by:ItWorked
ItWorked earned 150 total points
ID: 39713479
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
 

Author Closing Comment

by:ou81aswell
ID: 39714060
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39714696
You're welcome, I'll be over for breakfast tomorrow!
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I. Introduction In a previous article (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_6537-PaperPort-Upgrade-How-to-download-and-install-updated-versions-of-PaperPort-11-and-12.html) (now deprecated), I discussed how to upgrad…
In a previous article here at Experts Exchange (http://www.experts-exchange.com/articles/18414/Create-a-PDF-file-with-Contact-Sheets-montage-of-thumbnails-for-all-JPG-files-in-a-folder-and-each-of-its-subfolders-using-an-automated-batch-method.html)…
In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.
The goal of the tutorial is to teach the user how to make his/her own presets while editing so it is easier to edit there photos. Create a preset you like and copy that setting then save it in to your presets folder.

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now