Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to prevent slideshow from resizing images of different sizes?

    I would like a javascript slideshow that allows me to use images of different sizes and DOESN'T resize them. I also need it to be control driven (not just automatic) and I need captions. I've spent a while trying to find the right thing but almost all seem to resize the images (or they don't have captions).

    I used this code from codelifter.com and it works great except that it resizes the images and stretches some to fit the widest dimensions of the others, once a wide one is introduced into the sequence.

    http://www.codelifter.com/main/javas...lideshow4.html

    Is there any way around this? I don't really know javascript - I am slowly figuring some things out but this is beyond me. If anyone knows any code I could insert to prevent it from resizing imgages, I'd appreciate the help. I already experimented with changing the html (i.e. changing table cell sizes, deleting size indications, etc.) and that didn't seem to help.

    If you know of another slideshow that could suit my purposes then that's great too, but I found that most resized the images in some way if they were different sizes.

    Thanks!

  • #2
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Mdessen,

    Welcome to the forum.

    I have posted a "slideshow javascript" to the sub-forum of this forum.

    Here is the link.

    http://www.codingforums.com/showthread.php?t=73614

    It may be just what you want as written. But if not you should be able to pull out the parts that you need and adapt it to suit you.

    I tried to put in enough programer note to help figure out what everything is doing. But if you have questions feel free to ask.

    Here is a link to a test page I wrote that uses the slideshow as I wrote it.

    http://www.photojoe.ws/NewSlideShow.htm
    Last edited by PhotoJoe47; 12-17-2005 at 07:22 AM.

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! That looks like it will do what I need. Where you put 700px as the maximum width or height, that does mean that any images that don't exceed 700x700 will display at their normal size, right? In other words, an image of say 400x200 won't be stretched to 700x350? (That's what I'm trying to avoid.) I'll write you if I have any problems. I really appreciate the help!!! Thank you.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    probably got width="100" height="100" in the image tag, remove these and the slideshow images will display at natural size

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The width and height attributes are required if you want your HTML to be valid. A slideshow is only really meaningful if all images are the same size. You could edit the smaller images and enlarge them to match the largest size. Give them a transparent background on the extra area if you want them to appear smaller on the screen.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you everyone for all the suggestions.

    About changing the dimensions within the image tags (I assume you meant the first script I referred to, from codelift.com) - I actually tried that and it didn't work. It ended up stretching the images horizontally to meet the width of the largest previous one in the sequence, and I couldn't get around that by changing the img tags in the html. But this code from PhotoJoe works since it only specifies the largest possible height and width of the images.

    Also, I know that I could put the images on a larger canvas to make them all the same size, but is that really necessary to have vaild code? I'd rather not go to the trouble and I don't get why slide shows would have to have images all of the same dimensions. Is there a reason for that?

    Thanks again.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    With a slideshow where all of the images are the same size, moving from one image to the next changes the image and leaves the rest of the page looking the same. With different size images moving from one image to the next results in the entire formatting of the page having to be redone (in those browsers that support such reorganisation) or result in the page being completely stuffed in browsers that don't support redoing the whole page because an image has changed (eg. Netscape 4).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Stephen,

    If you check out the link to the test page I mention you will see that the page is quite stable. The images are shown on a 700 x 700 px "screen". The "screen" always stays the same size, only the images that are displayed on the "screen" change. For me I only had to sizes of images 700 x 467 px or 467 x 700 px. I have not yet tested the script with other size images, but I think they would not be any problems as long as they did not exceed the size limit set ( which is a variable that could be changed if needed ).


  •  

    Posting Permissions

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