Swiss Army slideshow

[Scooter]

1) Script Title: Swiss Army Slideshow

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

3) Describe problem: I am using the default buttons on the #1 slideshow. Can anyone tell me how to change the properties. In IE the button text comes up white. How do I change it? Thanks. Great script by the way!

[jscheuer1]

The button text is whatever color you might make make it in your style or perhaps even by some other method. I can't tell what you have as, I cannot see your page. Unless you specifically have your browser configured differently, the default color is black on any page with nothing else on it that could influence that color.

If you have other inputs on your page that have the white text color, that's what is doing it. That can be changed by giving those inputs a separate class. But, as I say, I cannot know for sure without seeing your page:

Please provide a link to your problem page.

[Scooter]

Hi: Basically I want to change the color of the font below the photos. However when I change the color in the style it changes the color of the font within the buttons below the description. How do I get the font to be different on the button and within the description. Here is the url: http://www.carolynzaroff.com/susan/gallery.html

Thanks.

[jscheuer1]

You have extra script code and styles that you are not using. Your script code could be:

<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own. 
slides[0] = ["graphics/slide/AbstractStudy.jpg", "Abstract Study 24 x 24"];
slides[1] = ["graphics/slide/flowersin-magenta.jpg", "Flowers in Magenta 28 x 36"];
slides[2] = ["graphics/slide/daniel.jpg", "Daniel 12 x 12"];
slides[3] = ["graphics/slide/snow.jpg", "Snow 30 x 24"];
slides[4] = ["graphics/slide/floral.jpg", "Hyacinth 30 x 30"];
//above slide show uses only the defaults

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

/***********************************************
* Swiss Army Image slide show script  - &#169; John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>

For the style, you need a container division for the slide show (from your source code, additions red):

    <td colspan="2" valign="top"><p>&nbsp;</p>
<div id="show1">
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name.  If Width is used, so must Height.
//Interval is optional too.  It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides)
</script>
</div>
    </td>

This would allow you to use styles like so (replaces your existing on page stylesheet):

<style type="text/css">

/* All Styles Optional */


#show1 span{
font-family:comic sans ms;
font-size:10pt;
color:#ffffff;
}


body {
	background-color: #8E80D5;
}
.navText {
	font: 14px Arial, Helvetica, sans-serif;
	color: #993300;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	font-weight: 500;
	}

</style>

I left what you had that actually did anything useful, and added styles for the newly created container division. The #show1 span selector styles the descriptions. You can use whatever styles you like, these are just examples. The input button controls will then take care of themselves, but could be styled with a #show1 input selector.

Unrelated to your question, if you were to specify the width and height and the background color for the show in its configuration, you wouldn't need to 'mat' the narrower and the shorter images. You could do this like so (additions/changes red):

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own. 
slides[0] = ["graphics/slide/AbstractStudy.jpg", "Abstract Study 24 x 24"];
slides[1] = ["graphics/slide/flowersin-magenta.jpg", "Flowers in Magenta 28 x 36"];
slides[2] = ["graphics/slide/daniel.jpg", "Daniel 12 x 12"];
slides[3] = ["graphics/slide/snow.jpg", "Snow 30 x 24"];
slides[4] = ["graphics/slide/floral.jpg", "Hyacinth 30 x 30"];
//optional properties for these images:
slides.width=550; //use to set width of widest image if dimensions vary
slides.height=396; //use to set height of tallest image if dimensions vary
slides.fadecolor='#8E80D5'; //	Set fading images' background color, defaults to white (string) - use color name or hex value with # prefix

[Softec]

Hi!

Can't i have images centered in the image display area????
Is that i have images in landscape and others in portrait, and i wanted them to display centered, and not aligned at the left...

Also, can i have a transparent background???

Is that i have an image in the background of my web page, and when switching from portrait images to lansdcape ones, the portrait ones have a white left and right border around it...

Also, can i translate the script from english to portuguese????
I'm intending to do so, for the images numbering, for instance...

Thanks in advance for the help...

[jscheuer1]

If your images vary in dimensions, you need to set the height and width of the show properly. That would be to at least the widest width and at least the highest height of the images in your image collection.

I'm not sure what you mean by transparent background. The images should cover anything underneath them anyway. The slide show uses two absolutely positioned divisions that are located in the same place. If one or both of them were transparent, you would see the previous or next image bleeding through at times other than during the fading in/out process.

You may translate it into any language you like as long as the credit remains intact. In fact, I like this idea.