Ultimate Fade-in slideshow image resize

[optimus203]

1) Script Title: Ultimate Fade-in slideshow (v2.1)

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

3) Describe problem: Is there a way to change the heigth and width of photos to be inserted into the slideshow, as opposed to just setting the height an width of slideshow? I have larger photos that get cropped by the size that I define for the slideshow, but other photos fit fine. Thanks.

[ddadmin]

Are you asking for a way to specify explicit width/height attributes for each of the images within the slideshow, so they are resized appropriately and fit inside the slideshow area?

[djr33]

While this is possible, it is always a better idea to resize images and save them at the new size, rather than trying to resize them on the web page. This is because browsers don't render resized images well: they get blocky and loose detail. If you resize them first in your graphics program then upload them, it will look better. It is also possible to do this as a batch operation (even potentially on the server), if you have a lot of images, so that you convert all of them and then the new copies are the right size.
(It's also possible to resize them dynamically on the server every time they are loaded, but this is a terrible idea because it takes a lot of processing power and would be very slow to load.)

Of course if you want to keep the images larger so that they can be viewed full size (outside the slideshow), then this is probably not possible and you will have to settle for lower quality images in the slideshow (or, potentially, have two sets of images-- upload/load twice for the different versions).

I hope this helps you think about how you want to approach the changes.

[Scriptor]

While this is possible, it is always a better idea to resize images and save them at the new size, rather than trying to resize them on the web page. This is because browsers don't render resized images well: they get blocky and loose detail. If you resize them first in your graphics program then upload them, it will look better. It is also possible to do this as a batch operation (even potentially on the server), if you have a lot of images, so that you convert all of them and then the new copies are the right size.
(It's also possible to resize them dynamically on the server every time they are loaded, but this is a terrible idea because it takes a lot of processing power and would be very slow to load.)

Of course if you want to keep the images larger so that they can be viewed full size (outside the slideshow), then this is probably not possible and you will have to settle for lower quality images in the slideshow (or, potentially, have two sets of images-- upload/load twice for the different versions).

I hope this helps you think about how you want to approach the changes.

Thank you djr33.

You said this is possible, but can you let me know how it is done. I want to bring in images from various sources (different web sites) and the images will all be different sizes. I need some way that they can resized automatically before being displayed.

The slideshow size is 700x400 ie. dimensions: [700, 400]. So, for example, I 'd like to resize an image that is 900x550 down to 700x400.

I've tried CSS:

<style>
img.resize{height:700px;width:auto;}
</style>

But I have to place class="resize" somewhere in the imagearray, which doesn't work.

I'm sure you have a much better method.

Cheers,

Scriptor

[ddadmin]

Thank you djr33.

I've tried CSS:

<style>
img.resize{height:700px;width:auto;}
</style>

But I have to place class="resize" somewhere in the imagearray, which doesn't work.


Scriptor

Actually you're close. To get the images in the slideshow to scale and fit, either horizontally or vertically, you can do something like the below in CSS:

<style>

#fadeshow1 img{
width: 250px;
height: auto;
}

</style>

"#fadeshow1" should be the ID of the slideshow DIV, and depending on whether you wish to scale the images to fit horizontally or vertically, set one property to an explicit value, and the other, to auto.

Cheers,

[Scriptor]

Thank you very much for that DD Admin. It worked perfectly!

Cheers,

Scriptor