Results 1 to 5 of 5

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

  1. #1
    Join Date
    Aug 2010
    Location
    Jacksonville, FL
    Posts
    85
    Thanks
    31
    Thanked 0 Times in 0 Posts

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

    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)
    Last edited by Elbee; 08-13-2010 at 05:37 PM. Reason: Needed to include Author of Code.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
      <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:

    Code:
      <div style="float:right; width: 477px; height: 350px; position: relative; left: -49px;">
    <script type="text/javascript">
    new inter_slide(slides, 526, 312)
    </script>
    </div>
    Last edited by jscheuer1; 08-14-2010 at 07:54 AM. Reason: to get an idea how crowded . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Elbee (08-14-2010)

  4. #3
    Join Date
    Aug 2010
    Location
    Jacksonville, FL
    Posts
    85
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default

    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)

  5. #4
    Join Date
    Aug 2010
    Location
    Jacksonville, FL
    Posts
    85
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default Swiss.Army.Image.Slideshow (Images with borders)

    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

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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:

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

    Code:
      <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Elbee (08-17-2010)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •