Move description / Swiss Army Slideshow

[ruser]

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

I would like to have the picture with the controls under the picture. I would like for the description to be on the right side of the picture with a heading and a short description aligned with the top of the picture.

For example:

---------
|picture | Picutre caption
|picture | Picture description
|picture |
---------
< - >


Is there a way to move the heading/picture from under the picture to the right of the picture?

Thanks!

[jscheuer1]

Working from the first demo show, and if I understood you correctly, this looked about right:

<style type="text/css">
#show1 {
width:22em;
margin:0 auto;
}
#master0 {
float:left;
padding-right:1ex;
}
#show1 #ctrl0 {
clear:left;
text-align:left;
}
#show1 input {
margin-top:1em;
position:relative;
left:4px;
width:2.9em;
}
#show1 #gostp0 {
width:3.7em;
}
#show1 #desc0, #show1 #desc0 b, #show1 #desc0 span {
text-align:left;
font-family:Comic Sans MS, cursive;
}

</style>

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own. 
slides[0] = ["../../side/files/photo1.jpg", "<b>Heading 1<\/b><br>Kissing Fools"];
slides[1] = ["../../side/files/photo2.jpg", "<b>Heading 2<\/b><br>Seated Woman"];
slides[2] = ["../../side/files/photo3.jpg", "<b>Heading 3<\/b><br>The Dog Lovers"];
slides[3] = ["../../side/files/photo4.jpg", "<b>Heading 4<\/b><br>Standing Woman"];
slides[4] = ["../../side/files/photo5.jpg", "<b>Heading 5<\/b><br>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

<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)
if(document.createElement){
iss[0].go('imgdsc0').parentNode.id='desc0';
iss[0].go('prev0').parentNode.id='ctrl0';
}
</script></div>

Notes: em's and ex's were used in the style section to accommodate browsers that still resize based upon font-size, otherwise the style section could have been:

<style type="text/css">
#show1 {
width:280px;
margin:0 auto;
}
#master0 {
float:left;
padding-right:5px;
}
#show1 #ctrl0 {
clear:left;
text-align:left;
}
#show1 input {
margin-top:14px;
position:relative;
left:4px;
width:38px;
}
#show1 #gostp0 {
width:49px;
}
#show1 #desc0, #show1 #desc0 b, #show1 #desc0 span {
text-align:left;
font-family:Comic Sans MS, cursive;
}

</style>

And, this will still be fine in browsers set to 100% and browsers that resize by 'zooming'. The rest is pretty much straightforward, except this part from the in body call:

if(document.createElement){
iss[0].go('imgdsc0').parentNode.id='desc0';
iss[0].go('prev0').parentNode.id='ctrl0';
}

These simply create style hooks for the description and control container divisions. The 0's here and in the style section designate the first show on a given page.