Changing border color on Ultimate Image Slideshow?

[jackofall]

1) Script Title: Ultimate Fade-in Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

Currently the border color on Ufade (to use John's easy-to-remember name for it) is black; I'd like to change it to white, so the images have a postcard or polaroid effect on a black background - is there some code I can add to the js to enable this, please?

[thetestingsite]

in this part of the code, change the highlighted:

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
}

to:

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+'" style="border: '+this.imageborder+'px #fff;">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

Hope this helps.

[jscheuer1]

As far as I know, that will only produce invalid inline style for the image border. I would suggest leaving the script alone. What I would do instead is add a stylesheet like the below to the head of the page (or add the highlighted style in the following stylesheet to your page's existing stylesheet if it already has one):

<style type="text/css">
#master0 img {
border:2px solid #fff;
}
</style>

Notes: Each slide show this script creates has a master division. Each of these is numbered from 0. So the first slide show on a page would be contained in master0, the second (if you have more than one) would be in master1, and so on for however many you have.

The selector:

#master0 img

selects all images in the first slide show.

One caveat though, however many pixels you specify for a given slide show as its images' border in a stylesheet as I am suggesting, must also be configured in the slide show call (highlighted and red below, given the 2px solid #fff border from my above example):

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 2, 3000, 1, "R")
</script>

That will allow the script to properly calculate the additional width and height that your stylesheet has set for the border when the script is laying out the slide show.

[jackofall]

Thanks for that, John, it worked fine once I'd located a missing end bracket in the style sheet that stopped it working.

Would it be too much to ask how one could insert a play and pause button to the show, so end-users have the choice whether or not to see the changing images on the page? This is still very much a work in progress, so I can't give a link at this stage, will do when it's more of a page than a process.

[jscheuer1]

This script already has that:

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

However Ufade also has a stop/go routine of sorts built in. If you set it it to have pause on mouse over (with a one, where shown below in the on page call):

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
</script>

You may access its mouse over flag like so:

<a href="#" onclick="fadearray[0].mouseovercheck=1;return false;">Stop</a> 
<a href="#" onclick="fadearray[0].mouseovercheck=0;return false;">Go</a>

The 0 in fadearray[0] indicates the first show on the page, just like discussed before for the style.

But unless you also edit the script by removing or commenting out (near the end of the main script) all of these lines:

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}
}

If the user has hit stop, and then moves the mouse over the show and away, it will start back up again.

[jackofall]

I had appreciated the mouseover to pause option in the Ufade script, but I was after the stop/go buttons and, thanks to you, the swissarmy is now up and running! But (you knew there'd be a 'but', didn't you?) is it possible to allow the user to click on a photo in the slide show and have a full, or fuller, size version of the photo open in a separate window on top of the current slide show? And with that window to have a Close option other than the 'x' in the corner? I'm sure the option's in there, I just can't find it.

Must say that your script is a lot simpler to manipulate than a lot of others out there and, as well, decent and simple slideshows are not that easy to find.