Ultimate Fade-In Slideshow

[WmIrvin]

Script: Ultimate Fade-In Slideshow (v1.5)
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

(1) I love this slideshow (www.viennapres.org)! However, I can only get it to work when I do NOT use the optional linking feature. When I put a URL in any/all of the link fields (ie, the second field of the fadeimages variable), the slideshow does not work. FrontPage gives an unknown error, and if I try to view it with IE 6 anyway, it just doesn't display the slideshow. FrontPage says the error is at the end of this section of the script:

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
}

I copy-and-paste the URL into the array entries, so I know it is a good URL; specifically, this is what I use:

http://www.viennapres.org/FFrame.asp?Pg=6&MGN=VPC-18

Please HELP! Thanks. Bill

[Twey]

Does it work when not using FrontPage?

[jscheuer1]

It could be a syntax error in the array, what does the code for the array look like with the link included?

[WmIrvin]

(1) I use FrontPage mostly as an html editor. So even though the preview mode gives the error, I have still saved it (www.viennapres.org/index-zlink.asp), and with IE6 the slideshow does not display. To compare, look at www.viennapres.org (defaults to index.asp).

(2) This is the array code with the linkage in:

fadeimages[0] =["mission-images/zinn-images/img_0299 sm.jpg", "http://www.viennapres.org/FFrame.asp?MGN=VPC-18&Pg=6", ""]
fadeimages[1] =["mission-images/zinn-images/img_0300 sm.jpg", "http://www.viennapres.org/FFrame.asp?MGN=VPC-18&Pg=6", ""]

etc.

Thanks.

[jscheuer1]

The problem is the HTML link that you have around the slideshow code:


<a href="FFrame.asp?MGN=VPC-18&Pg=6"
style="text-decoration: none" target="_top">
<font face="Verdana" size="1" color="white"><b>
<u>Katrina Disaster Relief</u><br>
VPC Mission Trip<br>
February 2006<br></b></font>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
//new fadeshow(fadeimages, 148, 98, 0, 1500, 0, "R")
new fadeshow(fadeimages, 148, 98, 0, 3000, 0)
</script>
<font face="Verdana" size="1" color="white"><b>
Are <u>you</u> thinking about a Katrina Mission trip?<br>
See larger photos from the Feb trip, as well as a Katrina
Relief Handbook.
<img src="mission-images/zinn-images/img_0297 sm.jpg" width="148" height="98" border="0">
</a>

You can fix it like so:


<a href="FFrame.asp?MGN=VPC-18&Pg=6"
style="text-decoration: none" target="_top">
<font face="Verdana" size="1" color="white"><b>
<u>Katrina Disaster Relief</u><br>
VPC Mission Trip<br>
February 2006<br></b></font></a>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
//new fadeshow(fadeimages, 148, 98, 0, 1500, 0, "R")
new fadeshow(fadeimages, 148, 98, 0, 3000, 0)
</script>
<a href="FFrame.asp?MGN=VPC-18&Pg=6"
style="text-decoration: none" target="_top"><font face="Verdana" size="1" color="white"><b>
Are <u>you</u> thinking about a Katrina Mission trip?<br>
See larger photos from the Feb trip, as well as a Katrina
Relief Handbook.
<img src="mission-images/zinn-images/img_0297 sm.jpg" width="148" height="98" border="0">
</a>

[WmIrvin]

Thanks; indeed that was the problem. I tried so many, many things, I'm surprised I didn't think to try that!

Next Question: Is there a way to modify the script to put a caption underneath the images? We have a perfect application for that. (Maybe I need a new thread for this question).

Thanks again for solving the other mystery!

Bill

[jscheuer1]

That's much easier. Find the fadeshow.prototype.populateslide=function and replace it with this one:


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 (typeof this.theimages[picindex][3]!='undefined')
slideHTML+='<div>'+this.theimages[picindex][3]+'</div>'
else
slideHTML+='<div></div>'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

Now, you can add your captions into the image arrays as a fourth parameter:


var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", "", "Kissing Fools"] // image syntax w/caption
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", "", "Seated Woman"] //image with link syntax and caption
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "The Dog Lovers"] //image with link and target syntax plus caption

If you want no caption, use either an empty set of quotes or skip it:


fadeimages[0]=["photo1.jpg", "", "", ""] // plain image syntax

or:


fadeimages[0]=["photo1.jpg", "", ""] // plain image syntax

If you do use any captions, be sure to increase the slideshow height in the call by about 20:


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

You can control the font and other style for the caption from a style sheet in the head of the page:


<style type="text/css">
#slide1cap div div {
font-family:sans-serif;
text-align:center;
}
</style>

and wrapping the show's call in a span with the id of your selector:


<span id="slide1cap">
<script type="text/javascript">

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

</script></span>

[WmIrvin]

Thanks for the info! And making the optional caption a fouth parameter rather than a new array makes it even easier. Thanks again!

Bill