Swiss Army Slideshow - only show some buttons

[pinkshiro]

1) Script Title: Swiss Army Slideshow

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

3) Describe problem:

Hi there,

I am wanting to use the swiss army slideshow, option 1 on that page. There's a stop/start button, a previous button and a next button.

I want to get rid of the previous & stop/start button, and just have the next button. Is it possible to do this? To display only one of the buttons?

I am also wanting the next button to be a custom image - how do I do this?

Finally, How do you position the elements? I am wanting the text to be directly under the images, left corner. And the next button sitting under the right corner of the images. Any help would be much appreciated!

[pinkshiro]

Sorry guys, but any ideas?

[jscheuer1]

With no stop/start button you must start the show in stopped mode and it can never be in play mode. To do that much, use the no_auto=1 property. To get a custom image, add the image_controls=1 property, and configure the image paths (from the demo, changes red):


//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=true;

//And configure the image buttons' images here:
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", "Kissing Fools"];
slides[1] = ["photo2.jpg", "Seated Woman"];
slides[2] = ["photo3.jpg", "The Dog Lovers"];
slides[3] = ["photo4.jpg", "Standing Woman"];
slides[4] = ["photo5.jpg", "John, Mary and Jesus"];
//optional properties for these images:
slides.no_auto=1;
slides.image_controls=1;


If you only have the one button, you can make all of the image buttons point to the same image file to save work, preloading time, and bandwidth (from the above):


//And configure the image buttons' images here:
var previmg='right.gif';
var stopimg='right.gif';
var playimg='right.gif';
var nextimg='right.gif';

Make sure that image is available to the page.

Getting the previous button to disappear is a little trickier perhaps. If you only have one slide show though, it is pretty easy. Put this in your stylesheet:


#prev0 {
display:none;
}

[pinkshiro]

Thanks for that.

I'm having troubles though. I just implemented these changes, and now my single "next" button has a massive onmouseover width/height....roughly 831pixels high!! This pushes the button down to the bottom of the screen. Why is this. I've uploaded my attempt for you to see.

http://dev.digitalgenus.com/buzz/index1.html

Here's my code:


<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input, div#show4 table input {
outline-style:none;
}
#prev0{
display:none;
}
</style>

<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->

<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=true;

//And configure the image buttons' images here:
var previmg='images/more.gif';
var stopimg='images/more.gif';
var playimg='images/more.gif';
var nextimg='images/more.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["images/portfolio1.jpg", "Kissing Fools"];
slides[1] = ["images/portfolio2.jpg", "Seated Woman"];
slides[2] = ["images/portfolio3.jpg", "The Dog Lovers"];
slides[3] = ["images/portfolio4.jpg", "Standing Woman"];
slides[4] = ["images/portfolio5.jpg", "John, Mary and Jesus"];
//optional properties for these images:
slides.no_auto=1;
slides.image_controls=1;
slides.button_highlight='#FFFFFF';
var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["photo6.jpg", "Crucifix"];
slides2[1] = ["photo7.jpg", "Alter Boys"];
slides2[2] = ["photo8.jpg", "Young Pan"];
slides2[3] = ["photo9_thumb.jpg", "Mona Lisa"];
//optional properties for these images:
slides2.desc_prefix='<b>Description:<\/b> '; //string prefix for image descriptions display
slides2.controls_top=1; //use for top controls
slides2.counter=1; //use to show image count
slides2.width=140; //use to set width of widest image if dimensions vary
slides2.height=225; //use to set height of tallest image if dimensions vary
slides2.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
slides2.use_alt=1; //use for descriptions as images alt attributes
slides2.use_title=1; //use for descriptions as images title attributes
slides2.nofade=1; //use for no fade-in, fade-out effect for this show
slides2.border=2; //set border width for images
slides2.border_color='lightblue'; //set border color for images

var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["images/portfolio1.jpg", "1", "http://www.google.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
slides3[1] = ["images/portfolio2.jpg", "2"];
slides3[2] = ["images/portfolio3.jpg", "3", "http://www.dynamicdrive.com"];
slides3[3] = ["images/portfolio4.jpg", "4", "http://www.msn.com", "_new"];
//optional properties for these images:
slides3.no_descriptions=0; //use for no descriptions displayed
slides3.pause=1; //use for pause onmouseover
slides3.image_controls=1; //use images for controls
slides3.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slides3.specs='width=50, height=50' //global specifications for this show's new window(s)
slides3.random=0; //set a random slide sequence on each page load
slides3.manual_start=1; //start show in manual mode (stopped)

//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls

//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

</script>

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

/***********************************************
* Swiss Army Image slide show script - © 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>

EDIT: I am getting a lot better results with slideshow3 - is this the one I should be using instead of slideshow 1? This is the end result I want: http://dev.digitalgenus.com/buzz/portfolio.html - so the next button is sitting on the bottom right corner of the slideshow and the description bottom left. Can you help me out please?

[jscheuer1]

In your external stylesheet (styles.css) remove table from the first selector (remove the red part):


/* CSS Document */

html, body, table {
margin:0px;
padding:0px;
min-height: 100%;
width: 100%;
height: 100%;
background-color:#939598;
}

And, though it has nothing to do with the problem, you don't need any of the following styles that you copied from the demo, but which are optional and unused by your layout:


div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input, div#show4 table input {
outline-style:none;
}

[pinkshiro]

wow, thanks for the quick reply. I feel so stupid :) That'll teach me for re-using another projects css.

So do you know how to realign the text and next button to both be in line with one another and sitting right under the images? Not sure what style tags move the button around...

[jscheuer1]

When I wrote this script, I didn't provide as many 'style hooks' as perhaps I should. The button is in a table though. However, the images are in tables too, but those tables are in a division with the id of 'master#', where # is the the slide show instance. So, on your page, after making the previous changes to the styles that I mentioned, you could do this:


table {
position:relative;
top:-2.25em;
left:-13em;
}
#master0 table {
position:static;
}

If you were to put other table(s) on the page, you would have to give them a class or id with the position property set to static, as I have for the master0 tables, to prevent the global table selector I'm advocating here from affecting them.

There are other ways, it would be helpful to you to brush up on how css is done. Another important action you could take would be to remove all unneeded styles from the page.

[jscheuer1]

Taking my own advice, I got rid of all the stuff that looked unnecessary and came up with this. Any tables that you might choose to add outside of the #show1 division are now protected from the styles applied within it:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>.: Buzz Design :.</title>
<style type="text/css">
body {
background-color:#939598;
color:#000000;
}
* {
font-family:arial, sans-serif;
}
#prev0 {
display:none;
}
#show1 {
width:394px;
margin:0 auto;
font-size:95%;
}
#show1 table {
position:relative;
top:-2em;
left:10em;
}
#show1 #master0 table {
position:static;
}
</style>
<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=true;

//And configure the image buttons' images here:
var previmg='images/more.gif';
var stopimg='images/more.gif';
var playimg='images/more.gif';
var nextimg='images/more.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["images/portfolio1.jpg", "Kissing Fools"];
slides[1] = ["images/portfolio2.jpg", "Seated Woman"];
slides[2] = ["images/portfolio3.jpg", "The Dog Lovers"];
slides[3] = ["images/portfolio4.jpg", "Standing Woman"];
slides[4] = ["images/portfolio5.jpg", "John, Mary and Jesus"];
//optional properties for these images:
slides.no_auto=1;
slides.image_controls=1;
slides.button_highlight='#FFFFFF';
</script>
<script src="swissarmy.js" type="text/javascript">
/***********************************************
* Swiss Army Image slide show script - © 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>
</head>
<body>
<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>
</body>
</html>

[pinkshiro]

Excellent. This is chugging away quite nicely now thanks.

My client has come back to me with a few requests, and instead of hijacking my own thread with an unrelated question, i'll start a new thread. Thanks.

[pinkshiro]

Hi John just wanted to thank you for your help last week. Very much appreciated. The site we used the script for went live yesterday ( http://www.buzzdesign.co.nz )

[Yiren]

Hi John, I am also trying to use the code for show#1. I would love to have the same set of buttons as your orignal but the text on the left to the button and below the image -- so it is the same concept of pinkshiro's but with your original set of buttons. I tired to achieve it by modifying the code you have for him, but my result was either the right layout with missing buttons or the text still sitting vertically between image and buttons. I spent hours comparing codes but I am just not savvy enough on DHTML. Could you help? I appreciate any tips!!! Thanks!