How to fade images on the multi-frame slideshow?

Printable View

11-11-2005, 09:00 PM
scotc1t

How to fade images on the multi-frame slideshow?

MultiFrame Image slideshow
http://www.dynamicdrive.com/dynamici...frameslide.htm

Fade-in slideshow
http://www.dynamicdrive.com/dynamici...nslideshow.htm

I would like to know how to add the fade affect used in the fade slide show to the multi-frame slideshow. I would just like each new picture to fade in. Can you please help with this.

Here is the page with the MultiFrame Image slideshow that I would like to add the fade into:
http://www.amusementadvantage.com/index.htm

Here is the page where I am using the Fade-in slideshow:
http://www.amusementadvantage.com/customers.htm

I appreaciate your help!
11-12-2005, 04:24 AM
jscheuer1

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.
PLEASE: Include the URL to your problematic webpage that you want help with.
11-12-2005, 02:33 PM
scotc1t

Corrected Posting

Thanks for letting me know. I apologize for the oversight. I have edited my original posting to be within guidelines the best I understand them. Please let me know if you need any more information. Thanks!
11-15-2005, 02:33 PM
scotc1t

Help

Can anyone help me with this? If it can't be done, please let me know that so I can explore other options. Otherwise, please help me learn how to do it. Thanks!
11-15-2005, 08:58 PM
jscheuer1

I'm pretty sure it can be done. It will likely be a bit of a project though. I wouldn't know where to begin advising you about learning to modify it yourself. It is almost a "Don't try this at home, kids" sort of proposition. Then again, perhaps not, how would you describe your level of expertise at coding, in general and in javascript in particular?

In any event, I will probably get to this one sooner or later.
11-16-2005, 05:55 AM
scotc1t

That is what I was afraid of. I would say I am still a beginner at coding in general and especially with java... Not something I could take on myself undoubtedly. Thanks for your insight.. Any suggestions on where I could possibly get to have someone code something like that for me aside from a complete web development resource?
11-16-2005, 06:22 AM
jscheuer1

I have one other major project on the burner right now. I can work on more than one at a time. I will get to it, I just can't give you a time table. Also, there is always a slight chance I will not be able to do it. I'll let you know if that happens. For the time being, of the two scripts, use the one that best suits your purposes.
11-16-2005, 05:49 PM
jscheuer1

For the kind of effect that I would like this to have, I would forget about the MultiFrame Image slideshow altogether. I'd use however many separate Fade-in slideshows I needed, each (except for the first one) showing through its own iframe onto the page. Give this a shot though, it might be what you want:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Multi-Frame Fade</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /*set CSS for SPAN tag surrounding each image*/ .seqslidestyle{ margin-right: 15px; } </style> </head> <body> <script type="text/javascript"> /*********************************************** * MultiFrame 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 * Modified for fade-in effect by jscheuer1 in http://www.dynamicdrive.com/forums ***********************************************/ var seqslides=new Array() //Set Path to Image plus optional URL ("" for no URL): seqslides[0]=["photo1.jpg", "http://www.dynamicdrive.com"] seqslides[1]=["photo2.jpg", "http://www.javascriptkit.com"] seqslides[2]=["photo3.jpg", "http://www.google.com"] seqslides[3]=["photo4.jpg", "http://www.yahoo.com"] seqslides[4]=["photo5.jpg", "http://www.google.com"] //Set pause between each image display (2000=2 second): var slidedelay=3000 //Set how many images to show at once (must be less than total # of images above): var slidestoreveal=3 //Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout) //"" for none (or horizontal): var slideseparater="" //Set optional link target to be added to all images with a link: var optlinktarget="secwindow" //Set image border width: var imgborderwidth=0 //Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal). //Change 0.2 to 0 to completely hide image when it's dimmed: var opacityvalues=[0.2,1] ///No need to edit beyond here/////////// function processimgcode(theimg){ var imghtml="" if (theimg[1]!="") imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">' imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">' if (theimg[1]!="") imghtml+='</a>' return imghtml } var curslide=1 //var to track current slide (total: slidestoreveal) var curimgindex=0 //var to track current image (total: seqslides.length) var isfirstcycle=1 //boolean to indicate whether this is the first cycle if (document.getElementById){ for (i=0;i<slidestoreveal;i++) document.write('<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater) curimgindex=slidestoreveal illuminateslide(0,opacityvalues[1]) } var curpos, fadeit function fadepic(tempobj){ if (curpos<1){ curpos+=.1 if (tempobj.filters) tempobj.filters.alpha.opacity=curpos*100 else if (tempobj.style.MozOpacity) tempobj.style.MozOpacity=curpos<=.99? curpos : .99 } else clearInterval(fadeit) } function illuminateslide(slideindex, amt){ slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0] if (slideobj.filters){ if (slideobj.filters.alpha.opacity<amt*100){ curpos=opacityvalues[0] fadeit=setInterval("fadepic(slideobj)", 80) } else slideobj.filters.alpha.opacity=amt*100 } else if (slideobj.style.MozOpacity) if (slideobj.style.MozOpacity<amt){ curpos=opacityvalues[0] fadeit=setInterval("fadepic(slideobj)", 80) } else slideobj.style.MozOpacity=amt } function displayit(){ clearInterval(fadeit) if (curslide<slidestoreveal){ if (!isfirstcycle) changeimage(curslide) illuminateslide(curslide, opacityvalues[1]) curslide++ } else{ isfirstcycle=0 for (i=0;i<slidestoreveal;i++) illuminateslide(i, opacityvalues[0]) changeimage(0) illuminateslide(0, opacityvalues[1]) curslide=1 } setTimeout("displayit()",slidedelay) } function changeimage(slideindex){ document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex]) curimgindex++ if (curimgindex>=seqslides.length) curimgindex=0 } if (document.getElementById) setTimeout("displayit()",slidedelay) </script> <p style="font: normal 12px Arial">This free script provided by<br> <a href="http://www.dynamicdrive.com">Dynamic Drive</a></p> </body> </html>
11-17-2005, 12:53 AM
scotc1t

One last request

John,

That's great. Works super. One last quick request if possible... How would I adjust the code so that all the images appear normal (100% opaque) when the page first loads and then again after each new images fades into place it stays normal (100% opaque) until the next image fades in? When I set both opaque numbers to 1 there is no fade affect. Essentially I would always have say 6 images on the screen and new images would fade in over the old images in each frame as it cycles. I hope I am explaining it correctly.

Perhaps I am asking too much as the fade affect will be different when fading from an image versus from white, or solid background. Changing the speed of the would might have an impact as well I suppose. Let me know what your thoughts are and if you have any ideas or suggestions.

Thanks so much for your help!

Scot :)
11-17-2005, 04:53 AM
jscheuer1

That is what I was talking about when I said:

Quote:

Originally Posted by jscheuer1

For the kind of effect that I would like this to have, I would forget about the MultiFrame Image slideshow altogether. I'd use however many separate Fade-in slideshows I needed, each (except for the first one) showing through its own iframe onto the page.

I might work it out so that the images could all be preloaded on the top page and then their source variables accessed from the iframes. If there were enough images and they were large enough (byte wise), this sort of thing, no matter how you worked it out, would be resource intensive and bandwidth intensive (the limits on that are much lower than one might think). The alternative to iframes, or frames of any type, would be to write the code for multiple slideshows on one page. This would still be resource/bandwidth intensive. Each separate image must have its own display area where it can fade in (while the last one is fading out in its own display space) and fade out (while the next one is fading in in its own display space). For a single stream of images this is not so bad, ergo - the fade-in image slideshow. The web is not TV. On television, you could just set things up once, tweaking it to your satisfaction, and tape it. Once taped, it would take no more bandwidth than any other tape. To try getting something like this to happen live on the web for each user, each time they load the page is a bit beyond what is advisable. A well crafted Flash movie would be a good alternative.

As another example. I have written a script that can take a directory of up to about 200 images and crop each one using random coordinates but crop areas of a set size, side by side and row by row to create a gallery of interesting thumbnails that, when clicked, will reveal the entire uncropped version of that image. Works great locally, but after about 12 images, or even 6, it will crawl on the web, even with broadband. It is a useful tool for brainstorming over images locally, as the crop sizes can be adjusted and a single image can have up to about 64 random crops. Although it can be very interesting and attractive, it just isn't suitable for the web.

To sum up, the mod I made takes this concept about as far as I believe it can practically go using javascript. Once you incorporate the rotating display areas for multiple display positions, you will have a script that asks too much of most browsers and most connections.

That being said, I cannot promise you that I won't play with it a bit, in an attempt to prove myself wrong but, I wouldn't hold your breath waiting for me to come up with anything serviceable. Find a Flash forum and see if anyone has or can come up with this sort of thing using Flash.
11-17-2005, 04:31 PM
scotc1t

I see what you are saying. Thanks for all the help. I will explore the flash option..

Scot
11-17-2005, 07:14 PM
jscheuer1

Because I was just working on a much simpler script, adapting it to use the IE proprietary fade trans, I'm getting the idea that this might be sort of possible. The way I would do it would be to use the fade trans for IE, all other browsers would get a version of the script similar to the one I already wrote for this or a non-fading version, depending upon their capabilities. I will not have the time to work on this until much later today at the soonest.
11-22-2005, 05:25 AM
scotc1t

That would be glad. Let me know if you figure anything out. Thanks again!
10-27-2007, 03:50 PM
photo

Multi-frame slideshow adation for Safari

Is it possible to get the transitions to work in Safari?
10-27-2007, 05:16 PM
jscheuer1

Quote:

Originally Posted by photo

Is it possible to get the transitions to work in Safari?

Probably by just changing every instance of -moz-opacity and of MozOpacity to:

opacity

would do it. However, since this thread was originally published, DD has updated their Fade In slide show and added another slide show, the Swiss Army:

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

and:

http://www.dynamicdrive.com/dynamici...army/index.htm

respectively. Both of which support multiple shows and fading in Safari and all other modern browsers.