swiss army image slideshow - moving buttons OVER image count

[elp]

1) Script Title: swiss army image slideshow

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

3) Describe problem:
By default, the buttons can be on the FAR TOP or on the FAR BOTTOM of the script, instead I would like to move the buttons OVER the image count.
the image count should be the last thing you see.
I would like the order to be:

IMAGE
DESCRIPTION
BUTTONS
IMAGE COUNT

and is it possible to have the image count in between the buttons?

IMAGE
DESCRIPTION
PREV BUTTON - IMAGE COUNT - NEXT BUTTON

thanks for the help

[jscheuer1]

The script is very flexible with many documented properties that act as options for how any given slide show will present itself.

However, I'm not aware of any, or any combination of them that would do just what you are asking, and I wrote the script.

Still, with additional code, and/or clever styling, and/or rewriting sections of the script - it could be done.

Working from the 1st demo slide show, I got pretty good results like so:

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 - Will this wrap?"];
//optional properties for these images:
slides.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls
slides.counter=1; //use to show image count
slides.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)

Then in the 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>

Which then allowed for these styles in the head:

<style type="text/css">

/* All Styles Optional */

#show1 input {
margin:0 4.5em;
position:relative;
top:-1.5em;
}

</style>

which separated the control input buttons (put more space between them) and raised them up to the level of the counter. You may want to change the exact dimensions to suit. Other modifications may be made in any or all of the areas already mentioned.

[elp]

thanks a lot for the help! great script by the way

in the end I didn't need the counter feature, but your suggestion was useful because I needed to put the controls at the same height of the description, and it worked.

as you can see on this page: http://www.elp.it/delgatto/gallery.html

I have another problem: try clicking on the controls and you will see that it highlights the table cell below.

I was able to eliminate the highlight feature onmouseover.
can you tell me how to completely eliminate the highlight feature onclick?
I actually don't need it at all.

[jscheuer1]

For that, the easiest way would be to actually edit the swissarmy.js script file here (add the red comment marks):

inter_slide.prototype.ibute=function(obj, i){
//if(!obj.parentNode)
return;
if(i==1)
obj.parentNode.style.backgroundColor=this.ibut_hc? this.ibut_hc : 'yellow';
else if(i==2)
obj.parentNode.style.backgroundColor='transparent';
else if(i==3){
obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='1px solid gray';
obj.parentNode.style.paddingRight='1px';obj.parentNode.style.paddingBottom=0;
}
if (i==2||i==4){
obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='none';
obj.parentNode.style.paddingRight='2px';obj.parentNode.style.paddingBottom='1px';
}
}

That will disable the subroutine that ordinarily gives the image buttons (if used, as I see you have) the depressed look when clicked. In your design, its not doing that anyway so, as I say, might as well get rid of (disable, as shown) it.

[elp]

thank you very much!

[sgolds]

I must be doing something wrong or I just don't understand .... well, a lot of things, however...

I'm trying to do basicall the same thing. I need:

IMAGE
-----------------------------------------
previous - - next
-----------------------------------------
other stuff here

unfortunately I'm not having much luck

The best I can do is get the standard buttons with a HUGE space under them.
Yes, I did add the no_descriptions and no_added_linebreaks. I tried the css code in this thread and didn't see any changes.

And one other thing, how can you tell how large the image box will be? My images are 200 x 500 but I can't figure out the exact height including the navigation buttons.

Please help, I'm getting very frustrated. I love what others have done with this script and would really like it to work for me.