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

[Scriptor]

Just another quick question:

If a photo exceeds the dimensions of the gallery frame, the photo seems to be cropped off at the right-hand side and at the bottom.

Is there anyway to centre the photo so that it is cropped equally on all sides? Or can the top or left-hand side be cropped?

[jscheuer1]

That might require a modification to the script which would be easier to work out if we had an example of your page.

Also I would use different css than ddadmin suggests because there are potentially other images in the #fadeshow1 div. If you use ondemand for the captions you have the hide and show images for that. And since virtually all browsers in use today accept max-width and max-height as style, you would get a better resizing - by width or height, whichever will show the largest possible version of the image after resizing to fit the slideshow:

#fadeshow1 .gallerylayer img {
max-width: 250px; /* set this to the width of the slideshow */
max-height: 200px; /* set this to the height of the slideshow */
}

That probably will not help the cropping problem you described, that probably has to do with how the script determines to position the image inside the slideshow and is probably thrown off when the image is no longer in its native dimensions. But it might be other css, we would have to see.

That would be easiest to determine and to fix with an example. Rather than one of us having to make one up, please provide a link to yours:

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[Scriptor]

Thanks John,

Here is a slideshow page: http://designline.com.au/news/slides-1.htm

Notice that image 3 has the bottom obscured because it's height is larger than the gallery frame. If it was wider, then part of the right-hand side would also be obscured.

So, just wondering if there is a way to handle the position of the image within the gallery frame. In this example, I'd like to reveal the trees at the bottom and lose part of the sky at the top.

Thanks,

Scriptor

[jscheuer1]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
background-color: #fff !important; /* set this to the background color behind the slideshow */
}
#fadeshow1 .gallerylayer img {
max-width: 600px; /* set this to the width of the slideshow */
max-height: 330px; /* set this to the height of the slideshow */
display: block;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://designline.com.au/news/js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script><script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [600, 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["background-84604_640.jpg", "", "", ""],
		["evening-55067_640.jpg", "", "", ""],
		["sky-62732_640.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false, randomize:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})
</script>
</head>
<body>
<div id="fadeshow1">
	&nbsp;</div>
<p>&nbsp;</p>
<table width="647" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="201" valign="top"><img src="background-84604_640.jpg" width="200" height="112" align="top"></td>
    <td width="12">&nbsp;</td>
    <td width="200" valign="top"><img src="evening-55067_640.jpg" width="200" height="112" align="top"></td>
    <td width="13">&nbsp;</td>
    <td width="221"><img src="sky-62732_640.jpg" width="200" height="125" align="top"></td>
  </tr>
  <tr>
    <td valign="top"><div align="center">1</div></td>
    <td>&nbsp;</td>
    <td valign="top"><div align="center">2</div></td>
    <td>&nbsp;</td>
    <td><div align="center">3</div></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>