Results 1 to 6 of 6

Thread: slideshow image size problem

  1. #1
    Join Date
    Apr 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default slideshow image size problem

    All script that I have checked have a fix image size. How do you change a script if you have vertical and horizontal images ? Some of the images I want to display are horizontal (640px x480px), others are vertical (480x640).

    I have changed the script at http://www.codelifter.com/main/javas...lideshow2.html

    ===========================================================
    Script: JavaScript Cross-Browser SlideShow Script
    With Cross-Fade Effect between Images
    Adjustable Timing and Unlimited Images
    Function: Displays images continuously in a slideshow
    presentation format, with a fade effect on
    image transitions.
    Browsers: All common browsers: NS3-6, IE 4-6
    Fade effect only in IE; others degrade gracefully
    Author: etLux
    ===========================================================

    Step 1.
    Put the following script in the head of your page:

    <script>
    // (C) 2000 www.CodeLifter.com
    // http://www.codelifter.com
    // Free for all users, but leave in this header
    // NS4-6,IE4-6
    // Fade effect only in IE; degrades gracefully

    // =======================================
    // set the following variables
    // =======================================

    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 5000

    // Duration of crossfade (seconds)
    var crossFadeDuration = 3

    // Specify the image files
    var Pic = new Array() // don't touch this
    // to add more images, just continue
    // the pattern, adding to the array below

    Pic[0] = '1.jpg'
    Pic[1] = '2.jpg'
    Pic[2] = '3.jpg'
    Pic[3] = '4.jpg'
    Pic[4] = '5.jpg'

    // =======================================
    // do not edit anything below this line
    // =======================================

    var t
    var j = 0
    var p = Pic.length

    var preLoad = new Array()
    for (i = 0; i < p; i++){
    preLoad[i] = new Image()
    preLoad[i].src = Pic[i]
    }

    function runSlideShow(){
    if (document.all){
    document.images.SlideShow.style.filter="blendTrans(duration=2)"
    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
    document.images.SlideShow.filters.blendTrans.Apply()
    }
    document.images.SlideShow.src = preLoad[j].src
    if (document.all){
    document.images.SlideShow.filters.blendTrans.Play()
    }
    j = j + 1
    if (j > (p-1)) j=0
    t = setTimeout('runSlideShow()', slideShowSpeed)
    }
    </script>

    ===========================================================

    Step 2.
    Put this onload event call in your body tag:

    <body onload="runSlideShow()">

    ===========================================================

    Step 3.
    Put this in the body of your page where you want the
    slide show to appear.

    Set widths and heights same as images
    Set image file same as first image in array Pic[] (above)

    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td id="VU" height=150 width=150>
    <img src="1.jpg" name='SlideShow' width=150 height=150></td>
    </tr>
    </table>

    ===========================================================
    to the following:

    I have erase the size and left it empty as I show below:

    <body onload="runSlideShow()">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td id="VU" height= width=>
    <img src="1.jpg" name='SlideShow' width= height=></td>
    </tr>

    This works fine with mozillas browsers, the pictures are displayed in their original size. But with IE the images are not displayed anymore.

    Can someone help me to fix this problem? Thanks

  2. #2
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by paldo View Post
    All script that I have checked have a fix image size. How do you change a script if you have vertical and horizontal images ? Some of the images I want to display are horizontal (640px x480px), others are vertical (480x640).
    How do you want the images displayed - do you want to re-size them so that they all fit a given-size container, or do you want a container that can accommodate any image without re-flowing the document?

  3. #3
    Join Date
    Apr 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you Clueful.
    Is it possible to re-size the pictures when the script is running?
    Will a vertical picture display correctly if the container has a size of 640X480?
    Is it easier if the container can accommodate any image without re-flowing the document? What do you suggest? See my site below, picture 2 and 3 are actually vertical pictures and are squized to horizontal.

    http://www.st-triphon.ch/photos_St_triphon/diashow.html

    Thank you

  4. #4
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by paldo View Post
    Thank you Clueful.
    Is it possible to re-size the pictures when the script is running?
    Will a vertical picture display correctly if the container has a size of 640X480?
    Is it easier if the container can accommodate any image without re-flowing the document?
    You could remove the size and width from the <img> tag, then place it inside a <div> which is sized to 640x640.
    It is possible to resize images while preserving the aspect ratio, but I'm not inclined to modify such a poor script.

  5. #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

    I would suggest:

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

    With its many options, it can be made to look just as basic as the slide show you are using, but if you set the maximum width of your images as the show's width and the maximum height of your images as the show's height, it will center each image within the viewing area.
    - John
    ________________________

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

  6. #6
    Join Date
    Apr 2007
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your advice. I've changed to the dynamicdrive script and its works. Your Java script is great. Thanks

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
  •