Ultimate fade in slideshow transition issue

[nutz]

1) Script Title: Ultimate Fade-In Slideshow (v1.51

2) Script URL (on DD):

3) Describe problem: I am using the following javascript code for a slideshow inside a photo gallery. With the current code there is some degree of overlap between consecutive images so that the images merge for a second. I think the images are fading out in few steps which I want to avoid.

I want a traditional slideshow where one image stays for 3 seconds, fade out without any steps, and next image entering without any delay. Dont want any merging.

Which function should I change for that? Is it parameters in set interval?

PASTING THE CODE:

<?php
defined('_JEXEC') or die('Restricted access'); 
?><script type="text/javascript"> 
/* <![CDATA[ */    
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
<?php echo $this->item->slideshowfiles ;?>
 
var fadebgcolor="<?php echo $this->tmpl['detailwindowbackgroundcolor'] ;?>"
 
var fadearray=new Array() /*array to cache fadeshow instances*/
var fadeclear=new Array() /*array to cache corresponding clearinterval pointers*/
 
var dom=(document.getElementById) /*modern dom browsers*/
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay

this.degree=10 /*initial opacity degree (10%)*/
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) /*thanks to Mike (aka Mwinter) :)*/
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() /*preload images*/
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) /*if IE5+ or modern browsers (ie: Firefox)*/
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) /*if IE5+ or modern browsers such as Firefox*/
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") /*if IE6+*/
obj.tempobj.filters[0].opacity=obj.degree
else /*else if IE5.5-*/
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") /*if associated link exists for image*/
slideHTML='<a HREF="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<table border="0" style="text-align:center;margin: auto;"><tr><td style="text-align:center;" align="center" valign="middle" height="<?php echo $this->tmpl['largeheight']; ?>"><img style="vertical-align:middle;" SRC="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px"></td></tr></table>'
if (this.theimages[picindex][1]!="") /*if associated link exists for image*/
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) /*if pause onMouseover enabled, cache object*/
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") /*if IE6+*/
crossobj.filters(0).opacity=this.degree
else /*else if IE5.5-*/
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ /*IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER*/
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

function disableBackAndNext()
{
document.getElementById("next").Disable=true
}
function disableBackAndPrev()
{
document.getElementById("prev").Disable=true
}
/* ]]> */
</script>

[jscheuer1]

Hmm, you cannot really fade out with no steps. Fading requires a gradual progression of some sort, though it can be slow, medium, fast . . . Sounds like you may want no fading whatsoever though. Is that the case?

[Snookerman]

Find this in the head section of your page and change it to one:

fadeduration: 500, //transition duration (milliseconds)

fadeduration: 1, //transition duration (milliseconds)

However, like John said, you can't fade without any steps and this script is written for fading. Since you don't want that, you need another script, but until you get that, this temporary solution should suffice.

Good luck!

[jscheuer1]

Find this in the head section of your page and change it to one:

fadeduration: 500, //transition duration (milliseconds)

fadeduration: 1, //transition duration (milliseconds)

That's actually for a different version of the script than the person is using. It will not apply to the code they have in their post. It will apply if they update to:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Still seems like a long way to go for no fading though.

[Snookerman]

Oh ok, well if you still want to use the same version, you can change the fifth parameter here:

new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")

to this:

new fadeshow(fadeimages, 140, 225, 0, 1, 1, "R")

Good luck!

[jscheuer1]

Oh ok, well if you still want to use the same version, you can change the fifth parameter here:

new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")

to this:

new fadeshow(fadeimages, 140, 225, 0, 1, 1, "R")

All that does is set a 1 millisecond delay between slides. It has nothing to do with fade duration, and would result in a very fast slide show . . . zip!

Best to find another slide show. All that code for fading is wasted, and if not eliminated entirely can cause errors (in fact already causes them in certain somewhat rare circumstances in IE 5.5+, so if you don't want it you shouldn't have it). There are so many slide shows, see:

http://www.dynamicdrive.com/dynamicindex14/index.html

as well as try Google to find others around the web.

[nutz]

Thanks you both for the suggestions

I changed it by changing the line obj.degree+=10 to obj.degree+=100

[jscheuer1]

That will 'work', but now you have a fading slide show that doesn't fade. In IE browsers, like on networked systems for schools and businesses, very often the Active X controls required for fading are disabled. So, even though your modified slide show doesn't require fading, it will still give an error in those browsers. That script also uses escalating z-index values which will prove problematic if a drop down menu or other content tries to display itself over the show. There could also be other unintended consequences I'm not thinking of at the moment.

If that's all OK with you, no need to do anything about it. But if it is of concern, get another slide show without fading.

[nutz]

That will 'work', but now you have a fading slide show that doesn't fade. In IE browsers, like on networked systems for schools and businesses, very often the Active X controls required for fading are disabled. So, even though your modified slide show doesn't require fading, it will still give an error in those browsers. That script also uses escalating z-index values which will prove problematic if a drop down menu or other content tries to display itself over the show. There could also be other unintended consequences I'm not thinking of at the moment.

If that's all OK with you, no need to do anything about it. But if it is of concern, get another slide show without fading.

Hi John..

Many thanks for your reply.. That really helped to improve my knowledge of the code..

However I am using a slideshow extension in my Joomla site. I was editing the code to customise it. I liked this extension for its all other features and hence I had to edit it...

Thanks a lot.. You are a star...

[nutz]

One more silly question..

Is there a way to avoid loops in this slideshow..

Again , I cant choose another script as this is part of a Joomla extension..