Swiss Army Slideshow new style hooks

[judeabb]

1) Script Title: Swiss Army Slideshow

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm
3) Describe problem: I finally bit the bullet and spent the day working on the updated (swiss.js) slideshow which allows me to put everything where I want it. It was kind of hit and miss/trial and error and it seems to be fine.
There's a couple of little things though:
• the height of the page seems to change depending on how much text is in the caption (some of the captions are long!) and I don't know why.
• on certain slides the whole thing seems to jump a little bit to the left when I click through. I'm guessing it has something to do with the caption again.

This is the page in question:
http://www.corinnesilva.com/new/slide0.php

Thanks in advance.

Jude x

[jscheuer1]

I think you need swiss_2.js:

http://home.comcast.net/~jscheuer1/side/files/swiss_2.js

It adds some new properties:


slides#.previous_value - defaults to ' << '
slides#.next_value - defaults to ' >> '
slides#.move_desc_up - set to 1 to move descriptions up for shorter images, requires position:relative; and z-index:100; for #imgdsc$ style selector.
slides#.desc_pic_width - set to 1 for description container (#desc0) width to follow changing image widths
slides#.count_prefix - text to prefix the count, defaults to 'Viewing Image: '
slides#.count_sep - text to separate the two count numbers, defaults to 'of'


With those new properties and the new style hooks still in effect, use these styles (only these):


#outer0 { left: 4px; }
#show0 {
width:510px;
}
#controls0 {width: 505px; float: left; text-align: center; margin-top: 13px; }
#prev0, #next0 { background-color: #fff; color: #000; border: none; padding: 0 35px; }
#desc0 { position: relative; top: -500px; left: 510px; width: 270px; height: 0; overflow: visible;color: #000; font-size: 72%; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; width: 270px; padding-left: 12px; text-align: left;}
#counter0 { font-size: 72%; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; position: absolute; top: 600px; left: 238px; width: 30px; height: 12px; }
#counter0 * {font-weight: normal;}
#thecnt0 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; width: 30px; height: 12px; }

Add this IE conditional stylesheet:


<!--[if IE]>
<style type="text/css">
#controls0 { margin-top: 8px; }
</style>
<![endif]-->


And use these properties (only these):


//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)
slides.button_highlight='#ffffff';
slides.button_depressed_highlight='#ffffff';
slides.border=0;
slides.previous_value = '<'; // defaults to ' << '
slides.next_value= '>' // defaults to ' >> '
slides.count_prefix = ' '; // text to prefix the count, defaults to 'Viewing Image: '
slides.count_sep = '&nbsp;/' // text to separate the two count numbers, defaults to 'of'

[judeabb]

What can I say? Absolute genius! Thank you!
(Still a tiny wobble in Safari 3.0.4 but that's it.)

I am a happy (very) junior coder.

Jude x

[jscheuer1]

Pretty good (assuming that the link to your demo is still the same). Anyways, this is what I had in mind:

http://home.comcast.net/~jscheuer1/side/swiss_2_h.htm

Of course, if you want to play with it a bit more, that's up to you. If the old demo is not your current working page, please accept my apologies.

P.S. I just (11:30pm est 1/24/09) updated the above linked demo to take care of the "tiny wobble in Safari".

[judeabb]

Thank you again. This slideshow has been bugging me for weeks!
You can see the page here: http://www.corinnesilva.com/new/slide0.php

Jude x