Control line spacing on Swiss Army Slide show's buttons

[Cyn]

1) I'd like to Control on Swiss Army Slide show's buttons

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

3) Describe problem: The SA slide show appears to be an update from a previous script used here:http://www.kansaslighting.com/landsc...capeintro.html

and w/ the swiss army, there is too much space between the images and text and buttons, causing the old page to split. I'd rather just update the script and not have to redo the page if I can. Here's the test page:
http://www.kansaslighting.com/landscape/TEST.htm

Is there a way to edit the js file to reduce the space between text/images/counter? This would stop the stretching the main table and splitting the images, thanks, Cyn

[jscheuer1]

That actually is one of the scripts I had in mind when I made the swiss army script. The swiss army script has properties available for each array of images to control many of the behaviors and presentational aspects of each show. See:

Configuration Options

on the demo page. The one that you would probably be most interested in is:

no_added_linebreaks=1

You just place it after the image array, example:

var slides=[];
//configure the below images and descriptions to your own. 
slides[0] = ["photo6.jpg", "Crucifix"];
slides[1] = ["photo7.jpg", "Alter Boys"];
slides[2] = ["photo8.jpg", "Young Pan"];
slides[3] = ["photo9_thumb.jpg", "Mona Lisa"];
//optional properties for these images:
slides.no_added_linebreaks=1;

[Cyn]

Thanks, that's a vast help, but I REALLY need to have the buttons in the cell below the slide show, is that possible, thanks, Cyn

[Cyn]

...OR have the text & buttons in the next cell below, that would probably be best, thanks so much for your help, Cyn

[jscheuer1]

Well, the slide show itself is a table and the controls, descriptions, and count (if any of these are used) are in divisions just above or below (depending upon configuration). Css style may be used to manipulate how all of this stuff looks to quite a degree. As far as where it will all end up in your final layout, if you are using a table that has one cell reserved for the slide show, you could make that cell span two rows (<td rowspan="2">) to get even more room to maneuver.

Much, if not all of this has been covered in other threads. If you want to institute your own controls elsewhere on the page, you can set the css style of the input element to display:none for the immediate container of the slide show and create custom buttons elsewhere, outside that container.

Here are the bare bones for custom buttons:

<input id="prev0" disabled type="button" value=" << " onclick="iss[0].changeimg(false, 'nav');">
<input id="gostp0" type="button" value=" Stop " onclick="iss[0].gostop(this);">
<input id="next0" disabled type="button" value=" >> " onclick="iss[0].changeimg(true, 'nav');">

All the zeros refer to the first slide show instance on a given page. This would also be the only slide show on a page, if you have just one.

To render the script generated controls totally unseen and without layout, put the slide show body code in a container:

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

Put your custom controls in the body anywhere outside that division, and put this in the head of the page:

<style type="text/css">
#slideShow input {
display:none;
}
</style>

You will also need to edit the script to remove its own id generation of its internal buttons. Replace this (found around line #126 in swissarmy.js, in the function inter_slide.prototype.controls):

document.write('<div align="center"><input id="prev'+this.issid+'" disabled type="button" value=" << " onclick="iss['+this.issid+'].changeimg(false, \'nav\');">\n'+
(this.no_auto? '&nbsp;&nbsp;&nbsp;' : ' <input id="gostp'+this.issid+'" type="button" value=" Stop " onclick="iss['+this.issid+'].gostop(this);">\n')+
' <input id="next'+this.issid+'" disabled type="button" value=" >> " onclick="iss['+this.issid+'].changeimg(true, \'nav\');">'+(this.jumpto? brs+'Jump to: <input disabled type="text" size="'+this.imgs.length.toString().length+'" id="goto'+this.issid+'" onkeydown="iss['+this.issid+'].jumper(event);"><input id="go'+this.issid+'" disabled type="button" onclick="iss['+this.issid+'].jumper();" value="GO">' : '')+'<\/div>')

with (simply removing the red parts from the above):

document.write('<div align="center"><input  disabled type="button" value=" << " onclick="iss['+this.issid+'].changeimg(false, \'nav\');">\n'+
(this.no_auto? '&nbsp;&nbsp;&nbsp;' : ' <input  type="button" value=" Stop " onclick="iss['+this.issid+'].gostop(this);">\n')+
' <input  disabled type="button" value=" >> " onclick="iss['+this.issid+'].changeimg(true, \'nav\');">'+(this.jumpto? brs+'Jump to: <input disabled type="text" size="'+this.imgs.length.toString().length+'" id="goto'+this.issid+'" onkeydown="iss['+this.issid+'].jumper(event);"><input id="go'+this.issid+'" disabled type="button" onclick="iss['+this.issid+'].jumper();" value="GO">' : '')+'<\/div>')

[Cyn]

I guess I wasn't using the right search terms...I appreciate your patience w/ me then :O). I'll give your suggestions a try, thank you so much, Cyn

[Cyn]

John, I modified the js and the code, but the slide show is not playing. I renamed the js file swissarmy1.js, it's line 125 in DreamWeaverMX 2004. The lines now read:

document.write('<div align="center"><input disabled type="button" value=" << " onclick="iss['+this.issid+'].changeimg(false, \'nav\');">\n'+
(this.no_auto? '&nbsp;&nbsp;&nbsp;' : ' <input type="button" value=" Stop " onclick="iss['+this.issid+'].gostop(this);">\n')+
' <input disabled type="button" value=" >> " onclick="iss['+this.issid+'].changeimg(true, \'nav\');">'+(this.jumpto? brs+'Jump to: <input disabled type="text" size="'+this.imgs.length.toString().length+'" id="goto'+this.issid+'" onkeydown="iss['+this.issid+'].jumper(event);"><input id="go'+this.issid+'" disabled type="button" onclick="iss['+this.issid+'].jumper();" value="GO">' : '')+'<\/div>')

But the slide show is not showing, The new page looks good just no slide showhttp://www.kansaslighting.com/landscape/test2.html

When you stated to put the slide show into a container.....not sure what you meant, but I pasted the code in the correct cell. I would appreciate it if you could tell me what I've done wrong, thanks, Cyn

[jscheuer1]

The way you pasted those lines into the message, I'm not sure if they are right but, they look to be. On your live page though it still says:

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

That file doesn't have the changes I suggested. I found your swissarmy1.js file on the server and it is right, just change the reference to it in the above. Also, using it without image buttons and without declaring the variables for those as you have here:

<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 slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own. 
slides[0] = ["landscapelight2_06.jpg", "<a href=\"http://www.kansaslighting.com/page/kansaslighting/CTGY/PL\">Path Lighiting</a>"];
slides[1] = ["center2.JPG", "<a href . . .

The part in red (true) should be false. This is very important!

[Cyn]

John, made the changes and it's working....now is it possible to get the text to display down above the buttons in the cell below, see here:

http://www.kansaslighting.com/landscape/test2.html

I can't tell you how much I appreciate all your help, Cyn

[jscheuer1]

Use these styles:

<style type="text/css">
#slideShow {
height:269px;
position:relative;
}
#slideShow input {
display:none;
}
#ecount, #edesc {
width:200%;
left:-50%;
text-align:center;
position:absolute;
padding-top:1ex;
}
#edesc {
z-index:1000;
}
#ecount {
padding-top:3.75ex;
}
#econtrols {
position:relative;
top:3ex;
}

</style>

instead of just the:

<style type="text/css">
#slideShow input {
display:none;
}
</style>

we used before. Make the script call in the body look like so (additions red):

	<div id="slideShow">
<script type="text/javascript">
new inter_slide(slides)
var extras=document.getElementById('slideShow').getElementsByTagName('div');
extras[extras.length-2].id='ecount';
extras[extras.length-3].id='edesc';
</script>
</div>

Add this id to a container for the controls, like so:

								<td valign="top" align="center">

<div id="econtrols"><input id="prev0" disabled type="button" value=" << " onclick="iss[0].changeimg(false, 'nav');">
<input id="gostp0" type="button" value=" Stop " onclick="iss[0].gostop(this);">
<input id="next0" disabled type="button" value=" >> " onclick="iss[0].changeimg(true, 'nav');">
</div>

								</td>

Also, you may as well get rid of this stuff:

<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;
}
.style3 {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
</style>

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

You are not using it.