PDA

View Full Version : Make background slideshow fade its images..



Sof
02-19-2008, 03:35 PM
Hi,

I would love to use this (http://www.dynamicdrive.com/dynamicindex14/bgslide.htm) 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
02-19-2008, 06:59 PM
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/dynamicindex14/fadeinslideshow.htm

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

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

Sof
02-19-2008, 08:06 PM
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 (http://www.artequuscenter.com/) page's banner constantly slowly changes. And keep the frame and logo and that, around them.

Sof

jscheuer1
02-21-2008, 02:55 PM
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/dynamicindex14/fadeinslideshow.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
02-23-2008, 10:38 AM
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
02-23-2008, 03:37 PM
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
02-24-2008, 08:45 AM
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
02-24-2008, 10:13 PM
Hi again,

Sorry to bother you again but I have done the slide show (http://www.artequuscenter.com/bb.html) (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
02-29-2008, 08:49 PM
bump... bump...

jscheuer1
03-01-2008, 01:51 AM
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.

Sof
03-01-2008, 12:07 PM
Thank you so much! It works now! But I would like to (boldly) ask you if there is any way one can make the fade any slower...:o

jscheuer1
03-01-2008, 02:19 PM
You need to keep the credit on the page(s) that use it:


<script type="text/javascript" src="/java/fadeshow.js">

/***********************************************
* 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.
***********************************************/

</script>

See:

http://dynamicdrive.com/notice.htm

for details.

To answer your question, here:


function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filte . . .

to make it slower, can be:

obj.degree+=5

or:

obj.degree+=2

1 could be used, but I think that is too slow. There is one other place you can edit, to slow things down just a little more. That's here:


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.curca . . .

In this case, increasing the number 50 in the above will slow things. You shouldn't increase it by much though, because too much of an increase will make the transitions choppy. 60 or 70 are about as high as you should go.

Sof
03-01-2008, 07:40 PM
I will put the credit on right away! Sorry about that, it was ignorant of me not to read through the notice!

Thanks again for the help! I am going to have a play now...