Solved

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

Posted on 2013-12-11
7
257 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 83

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 83

Expert Comment

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

Featured Post

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Recently, an awarded photographer, Selina De Maeyer (http://www.selinademaeyer.com/), completed a photo shoot of a beautiful event (http://www.sintjacobantwerpen.be/verslag-en-fotoreportage-van-de-sacramentsprocessie-door-antwerpen#thumbnails) in An…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The goal of this is to tech the user how to export photos out of Lightroom and the different options they have. Select which photos you want to export : Select where you want to export and with which options : Export :
The goal of the tutorial is to teach the user how to edit a basic portrait of someone. This tutorial shows how to edit two basic photographs, one of a car and one of a person.

690 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