Swiss.Army.Image.Slideshow-bottom of images being cut off-need more space above play

[Elbee]

1) CODE TITLE: Swiss Army Image Slideshow

2) AUTHOR NAME/NOTES: John Scheuer

3) DESCRIPTION:

If you look at the home page (http://jpl.coj.net/welcome-new.html), the images have always been width:477 height:312. The wonderful Stop/Play area is cutting off the bottom of the images. I believe the problem is in the javascript somewhere since I have tried adjusting the height of the images from 312px all the way down to 250px and it doesn't change.

Is there a way of having a little more space between the bottom of the image and the Stop/Play buttons? If you look at the image for Voices of the First Coast, it is especially noticable that the bottom is cut off.


4) URL TO CODE: http://jpl.coj.net/welcome-new.html

I really appreciate your help. I've only had three training days of javascript and I think I need 3 years of training! Elbee (Linda)

[jscheuer1]

It's really a matter of not having left enough room for things.

The entire page should probably be reworked. But that's a bit beyond what's normally done in these forums. However, you may force there to be more room by (additions/changes highlighted):

  <div style="float:right; width: 476px; height: 350px;">
<script type="text/javascript">
new inter_slide(slides, 477, 312)
</script>
</div>

To get an idea of how crowded things are (this is not a solution) try it like so:

  <div style="float:right; width: 477px; height: 350px; position: relative; left: -49px;">
<script type="text/javascript">
new inter_slide(slides, 526, 312)
</script>
</div>

[Elbee]

Hi John,

You're a genius!!! It worked perfectly. Somehow I have been surviving this job of being the Librarian who handles the Public Website; but I don't know how! Of course, they give us no training. I'll bet you never needed any training! You're brain is wired to know how to do this.

Do you watch the Big Bang Theory on TV? You're Sheldon!!!!!

Thank you so much for getting me out of this situation. You're the best.

Any of my good quotes about you may be used. Elbee (Linda Eckersen)

[Elbee]

I hate to bother you with this again but I was wondering how you would put a border around an image in script like this:

slides[0] = ["http://jpl.coj.net/pics/nav/home2/closed-labor-day.jpg", "", "http://jaxpubliclibrary.org/"];
slides[1] = ["http://jpl.coj.net/pics/nav/home2/voices.jpg", "", "http://www.wjct.org/events/voices_of_the_first_coast_project"];
slides[2] = ["http://jpl.coj.net/pics/nav/home2/tutor-homework-help.jpg", "", "http://jaxpubliclibrary.org/pics/logos/tutor-video.wmv"];

Thanks for your help, Elbee

[jscheuer1]

All images in the slide show, or just one? For all images in the slide show, use css:

<style type="text/css">
#master0 img {
	border: 3px solid red;
}
</style>

Put that in the head of the page. For a single image, I think the easiest way would be to put a border around it in an image editing program.

But there are ways, using some of the more advanced and either undocumented features or modifications of the script to apply individual styles to individual images.

I must mention though, last time I looked your images didn't really fit into the space provided for them, even after the changes. In a case like that, borders of any kind would probably look odd.

If you are using:

  <div style="float: right; width: 476px; height: 350px;">
<script type="text/javascript">
new inter_slide(slides, 477, 312)
</script>
</div>

You might try:

  <div style="float: right; width: 476px; height: 350px; border: 3px solid red; overflow: hidden;">
<script type="text/javascript">
new inter_slide(slides, 477, 312)
</script>
</div>