Make background slideshow fade its images..

[Sof]

Hi,

I would love to use this background slideshow in a banner on a site that I have built. The only thing is that I want the pictures to fade slowly and I want to put two images next to eachother.

Can anyone add that little feature to that script? Please.....

[jscheuer1]

I don't think that would be very easy to modify because you cannot fade the background without fading the body, which will fade the entire page (opacity is inherited). I would use another script, and it gets a bit complicated. The script I would use is:

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

with some modifications and a special layout, like this demo:

http://home.comcast.net/~jscheuer1/side/files/bg_slide/

[Sof]

YeY...

That's perfect!

Can you put two images next to eachother?

What I want to do, is make the slideshow so that the two right images in this page's banner constantly slowly changes. And keep the frame and logo and that, around them.

Sof

[jscheuer1]

I see that your actual page poses a different situation, one in which the alignment and sizes of the images is crucial. However, that shouldn't be a major problem.

The good news - the slide show I modified:

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

can be used for multiple slide shows on a page, even without any of the modifications I made in my example page.

The bad news - you cannot use background for this. You will need to break up:

http://www.artequuscenter.com/img/ban.jpg

into three images, and place these the first panel (since you don't want that one changing) in either a division with the image floated left or in a table. The other two images would then each become a part of a slide show, placed either in that same table row, or in that same division within nested divisions also floated left (note: floats are not required at all with the table approach). The other images in these slide shows would also have to have that portion of the text and decorative border on them that these images have. Layout style borders, padding and margins would all have to all be 0.

[Sof]

Hi,

Funny I had wrote an answer to you but it is not showing... Thanks again for your help.

If I need to break up the banner then The borders and text will also fade which is why I liked the background one.

Maybe I'll change my mind and just have the logo (the left of those three) pictures fading and changing colour or something. If the problem is in putting two next to eachother. I really liked the first modification you did and if that works for one picture I'll use that.

Have I undestood right?

[jscheuer1]

Have I undestood right?

I'm not sure. The borders and text are already a part of the image. Breaking it up, or not breaking it up won't change that. However, if the boarders and text are the same and in the same position on all images that are in a given slide show, they will not appear to fade, only those portions of the images that are different from each other will appear to fade.

[Sof]

if the boarders and text are the same and in the same position on all images that are in a given slide show, they will not appear to fade, only those portions of the images that are different from each other will appear to fade.

DUUH! Why didn't I think of that! Ok. I have to prepare a load of cut up pictures with the border and text and that then.

I'll get back to you if I have any probs.
Thank's again!
Sof

[Sof]

Hi again,

Sorry to bother you again but I have done the slide show (sort of). but I don't know why the middle images don't show... the middle div. shows the end div's images too. How can I change that? And also is there anyway one can change the time of the fade away to longer say about 5 or 6 sec.

[Sof]

bump... bump...

[jscheuer1]

bump... bump...

Sorry, I must hae missed your previous post, good thing you bumped.

OK, that's not exactly how the slideshow works. Instead of having two main script sections for the slideshow. You should have just one, with two arrays defined in it. Replace both with this single version:

<script type="text/javascript">
      
/***********************************************
* 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()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["mi1.jpg", "/img/slide/mi1.jpg", ""] //plain image syntax
fadeimages[1]=["mi2.jpg", "/img/slide/mi2.jpg", ""] //image with link syntax
fadeimages[2]=["mi3.jpg", "/img/slide/mi3.jpg", ""] //image with link and target syntax
fadeimages[3]=["mi4.jpg", "/img/slide/mi4.jpg", ""] //plain image syntax
fadeimages[4]=["mi5.jpg", "/img/slide/mi5.jpg", ""] //image with link syntax
fadeimages[5]=["mi6.jpg", "/img/slide/mi6.jpg", ""] //image with link and target syntax
fadeimages[6]=["mi7.jpg", "/img/slide/mi7.jpg", ""] //image with link and target syntax

var fadeimages2=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["en1.jpg", "/img/slide/en1.jpg", ""] //plain image syntax
fadeimages2[1]=["en2.jpg", "/img/slide/en2.jpg", ""] //image with link syntax
fadeimages2[2]=["en3.jpg", "/img/slide/en3.jpg", ""] //image with link and target syntax
fadeimages2[3]=["en4.jpg", "/img/slide/en4.jpg", ""] //plain image syntax
fadeimages2[4]=["en5.jpg", "/img/slide/en5.jpg", ""] //image with link syntax
fadeimages2[5]=["en6.jpg", "/img/slide/en6.jpg", ""] //image with link and target syntax
fadeimages2[6]=["en7.jpg", "/img/slide/en7.jpg", ""] //image with link and target syntax
  
var fadebgcolor="white"

////NO need to edit beyond here/////////////
 
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*0
var fadeheight=fadeheight+this.imageborder*0
 
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+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
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()
}

</script>

Then the first in body call can remain as is:

<div id="slide1"><img src="img/slide/fi.jpg" alt="fi" width="274" height="279" /></div>
<div id="slide2"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 236, 279, 0, 5000, 1, "R")
</script>

</div>

<div id="slide3"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 268, 279, 0, 3000, 1, "R")

 
</script></div>

But the second one must address the second array of images, as shown in the above.