swiss army button positioning II and text format

[ckwebber]

1) Script Title: Swiss Army Slideshow

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

3) Describe problem: I have a couple of questions.

1. Is there a way to have the script have an up/down arrow rather than a right left? I read the reply to the post about button positioning from thisoldhaunt. But I think my issue is more complicated. I tried doing a float left and a top margin... the top margin works, but not the float left. And even if the float left did work I still don't know how to get them on top of each other rather than side by side. Ideally, I'd like some sort of command that I could apply to an image anywhere on the page (currently they are in another div), but I realize that may be harder than it sounds to me... I honestly have no idea.

2. Is it possible to change the font size, font family, etc. of the counter? I would also like to move it to the bottom right rather than centered. Can I do this via css somehow?

[jscheuer1]

I'm not sure exactly what you are going for but, this is my interpretation of what you wrote applied to the first demo show, add these styles in the head:

<style type="text/css">
#show1 {
width:280px;
margin:0 auto;
position:relative;
}
#show1 input {
position:absolute;
top:12px;
left:0;
width:55px;
}
#show1 #gostp0 {
top:42px;
}
#show1 #next0 {
top:72px;
}
#show1 #prev0, #show1 #next0 {
left:10px;
width:35px;
}
#show1 #counter0 {
text-align:right;
font-family:Comic Sans MS, cursive;
}
</style>

Add the red property to the first slide show declaration:

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.counter=1; //use to show image count

Add the red markup and code to the first slide show markup and call in the body:

<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)
iss[0].go('prev0').value=' /\\ ';
iss[0].go('next0').value=' \\/ ';
iss[0].go('thecnt0').parentNode.parentNode.id='counter0';
</script></div>
</p>

[ckwebber]

Thank you, John. I appreciate what you did there. However, I am still unable to get the result that I am looking for. I couldn't figure out how to change your arrows into my little image files that I had created. Below are some links to show you what I am trying to do as well as my failed efforts in achieving this result. If you get a minute, any help would be appreciated. Thanks.

Here's how I want it to look:
http://www.marcos-ac.com/88/index1.htm

Here are my efforts:
http://www.marcos-ac.com/88/who.htm (Probably the best one, but I couldn't figure out how to make the arrows my images, remove the little white cursor highlight from the lower black bar when I click an arrow, or get there to be a "/" in between the numbers. I tried editing the .js file. I could get rid of the "Viewing" part, but not the "of".)
http://www.marcos-ac.com/88/who1.htm
http://www.marcos-ac.com/88/who2.htm

[jscheuer1]

I didn't realize that you were not only moving the buttons around but also using images instead of the default buttons. There are several ways you could approach getting rid of the highlight and click effects that cannot move with the image buttons as the script is currently written. This worked out for me:

slides.button_highlight='transparent';

And, replacing the inter_slide.prototype.controls function with this one that has no mouse over, down, out or up events for the next and previous image buttons.

inter_slide.prototype.controls=function(){
var brs=this.addbr? '<br>' : ' &nbsp;';
if(!this.ics&&!this.no_c)
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>')
else if(this.ics&&!this.no_c){
var op=document.body.filters? ' style="filter:alpha(opacity=100);"' : ' style="opacity:'+(this.man_start? 0.99 : 0.45)+';"';
document.write('<table align="center" cellpadding="0" cellspacing="10"><tr><td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' type="image" title="Previous" id="prev'+this.issid+'" src="'+previmg+'" onclick="iss['+this.issid+'].changeimg(false, \'nav\');"><\/td>'+(this.no_auto? '<td>&nbsp;<\/td>' : '<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" title="Stop" type="image" id="gostp'+this.issid+'" src="'+(this.g_fPlayMode? playimg : stopimg)+'" onclick="iss['+this.issid+'].gostop(this);"><\/td>')+'<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' type="image" title="Next" id="next'+this.issid+'" src="'+nextimg+'" onclick="iss['+this.issid+'].changeimg(true, \'nav\');"><\/td><\/tr><\/table>\n');
}
else
this.no_c=1;
}

Incidentally, in Opera for some reason, the image buttons need to be set to a higher z-index style to appear over other elements in your layout. I did this with script (it could also be done in the stylesheet), ex (using script):

<div id="imagearea"><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)
iss[0].go('prev0').style.zIndex=iss[0].go('next0').style.zIndex=100000;
iss[0].go('thecnt0').parentNode.parentNode.id='counter0';
</script>
		</div>

Notice too that, since we are no longer using standard input buttons, there is no longer any reason to change the value attribute.