Swiss army slide show display issues

[hatmandude]

1) Script Title: swiss army slide show

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

3) Describe problem:

I do not know why window appears to open MUCH larger than image size (925 x 750), so in effect the left half of the window is blank and only half the image appears unless you scroll all the way over to the right.

How do I center it? Funny thing is is works fine when I preview on desktop but when live (tested on 3 different systems and o/s's) it has this issue.

Any help appreciated

see : http://stuartandbutzi.com/2008_pix/sequential.htm

Thanks, Stuart

[jscheuer1]

Get rid of all of the styles (remove all of the below):

<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;
}
</style>

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

[hatmandude]

It does indeed solve the image display issue, but can you please advise which code to leave in to allow this parameter to display?

[jscheuer1]

I'm not really sure. Here's what I'd suggest, make a new style block:

<style type="text/css">
body {
font-family: arial;
font-size: 90%;
color: #fff;
background-color: #000;
}
</style>

Once you have that, you can also get rid of the deprecated:

 bgcolor="#000000"

from the body tag.

[hatmandude]

Thanks- that worked well.

One other issue though: there still seem to be added (and unwanted) linebreaks at the TOP of the image, so do you know a way to eliminate those and have the image size maximized vertically?

[hatmandude]

Thanks, but there still seem to be added (and unwanted) linebreaks at the TOP of the image, so do you know a way to eliminate those and have the image size maximized vertically?

see http://stuartandbutzi.com/jayden/sequential.htm

Also, there it seems to take a long time for the slide show to begin, so is there a way to alter how much gets preloaded?

[jscheuer1]

The vertical alignment in this case has nothing to do with the script, get rid of the <br> tags here:

<br>
<title>Jayden Sy Zimmerman's Sequential Slide Show</title><br>

They are invalid anyway (don't belong in the head there) but browsers then transfer them to the body, where they are creating that extra space at the top of the page.

If you want absolutely no space at the top, also add (highlighted):

<style type="text/css">
body {
font-family: arial;
font-size: 90%;
color: #fff;
background-color: #000;
margin: 0;
padding: 0;
}
</style>

Some other unrelated things I noticed, you don't need (get rid of all of it):

var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

and then must set (just above what we just got rid of):

var preload_ctrl_images=false;

Doing so will ease loading.

You also don't need (highlighted):

slides3.no_descriptions=0; 
slides3.pause=1; 
slides3.image_controls=0; 
slides3.button_highlight='#cccccc'; 
slides3.specs='width=1024, height=768'; 
slides3.random=0; 
slides3.manual_start=0; 
slides3.jumpto=1;
slides3.width=925; 
slides3.height=680; 
slides3.no_added_linebreaks=1;
slides3.delay=5000;

And you shouldn't need any of those black left and right borders on the images. Getting rid of those by cropping in an image editor will save loading times and disk space. Back up the images before cropping, just in case of a problem. Since you've already set the dimensions of the show:

slides3.width=925; 
slides3.height=680;

The script will center the images in that area. If you have any that are wider or taller, set the dimensions to the widest width and the tallest height.

[hatmandude]

Thanks alot John- that did the trick!

[jscheuer1]

Just a note, you've managed to slip in another invalid <br> tag:

<style type="text/css">
body {
font-family: arial;
font-size: 90%;
color: #fff;
background-color: #000;<br>
margin: 0;
padding: 0;
}
</style>

At least in some browsers it is causing the images not to quite exactly meet with the top of the viewport.

If you take that out, the images should actually touch the top of the viewport. If you want to maintain that slight upper margin, you may configure it in the style or simply move the <br> to a valid location right after the opening body tag.