Swiss Army Image Slideshow

[DaveX]

1) Script Title: Swiss Army Image Slideshow

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

3) Describe problem: I've got this up and running and it's great! I'm using my own images for buttons and I'm wondering what my options may be for a small issue. With the default settings the two directional buttons fade out when you press 'play'. Is there a way to do that using your own images? I don't see options listed that address this specifically but maybe there is a workaround or trick I can use? Alternately, is there a way to use the default buttons with a custom font? Anyone have any other ideas that would convey the fact that the directional buttons don't work when the slideshow is playing automatically?

[jscheuer1]

On the demo page both the default and the custom buttons fade to disable during auto play and yours should as well. A custom font for the default buttons can be arranged. Enclose the script call for a given show in a div with an id:

<div id="show2">
<script type="text/javascript">
new inter_slide(slides2)
</script>
</div>

Then, in your style section you can do this:

#show2 input {
font-family:cursive;
}

Any valid styles may be used. However, the styling of inputs is rather limited and varies by browser. Fortunately, font styles are pretty much universally supported for inputs. A DOCTYPE may be required in some browsers for both the fade and the font styling.

[DaveX]

Ahh! You know, on closer inspection I do see them fade a bit. I think it's just may be my choice of colors. Is the fade, in effect, a filter or semi opaque gif of some kind? Is there a way to adjust it? How about making the directional buttons go away during autoplay? Thanks again for your help!

[jscheuer1]

The fade really should be noticeable. It is to 45%. As I said before though, if your page has no DOCTYPE (and I might add, has a DOCTYPE like XHTML or any that throws the browser into quirks mode) the fade will not be applied to image buttons.

If you have a valid DOCTYPE that doesn't throw the browser into quirks mode and you want to reduce the 'disabled' opacity of image buttons farther, just do a global search and replace in swissarmy.js for:

45

replace all instances with your new value. To make them disappear, use 0.

If you are not using image buttons, this will have no effect. The default buttons fade as per the browsers method of indicating a disabled input button. Most browsers do fade them out, but not all do. All modern browsers do.

[DaveX]

That did the trick, thanks! I've got one more question (I hope): In Firefox, I get a dotted line around the buttons after they are clicked. Is there something I can modify in the script itself to get rid of that or can I use a general css that would affect it?

[jscheuer1]

That is an accessibility feature for mouseless navigation and most folks who use FF on a regular basis are pretty much used to it. With that in mind I would advise against removing it. However, it can be removed with css by having your markup look something like so:

<div id="theShow">
<script type="text/javascript">
new inter_slide(slides)
</script>
</div>

And in your stylesheet having:

div#theShow table input {
outline-style:none;
}

This will also disable mouseless navigation in IE and all other browsers even though they do not show that outline ordinarily until mouseless navigation is initiated - Another good reason not to do this.