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

02-03-2010, 07:18 PM

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

02-03-2010, 07:37 PM

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

06-06-2013, 01:10 PM

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

06-06-2013, 05:13 PM

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

06-06-2013, 06:24 PM

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

Cheers,

Scriptor

Scriptor

06-07-2013, 01:25 PM

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

06-07-2013, 02:14 PM

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

06-08-2013, 01:10 PM

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.

Perhaps my example was not extreme enough to show what I actually wanted to do.

I want the photos to completely fill the gallery frame. That is why I set the max-height to auto, as in slides-2 below. However I would like the ability to position the photo in the frame by moving it up or sideways.

http://designline.com.au/news/slides-2.htm

By changing the max-height to 300px, as in slides-3 below, it means that the photo will not fill the frame.

http://designline.com.au/news/slides-3.htm

Thanks,

Scriptor

jscheuer1

06-09-2013, 02:44 AM

You can do that. But if you do, you cannot maintain aspect ratio. Change this:

#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;
}

So I guess what you are saying is, there is no way to actually position the image. The top left-hand corner will always remain 0,0. And, depending on the size of the image, the bottom right-hand corner will tend to be obscured by the limits of the gallery frame. I was hoping there would be a way to set the top left-hand corner of the image to say, -20,-50 or something like that.

All the best,

Scriptor

jscheuer1

06-09-2013, 09:40 AM

You cannot do both.

You cannot fit an image into a box that has one aspect ratio, and have it fill that box, and have it maintain its aspect ratio unless its aspect ratio is the same as that box's.

If you want to maintain aspect ratio, then designline.com.au/news/slides-3.htm is the way to go. But for images whose aspect ratio is not (in this casr) 1.1818 (600/330), there will me parts of the box that will not be filled.

If you must fill the 600x330 box with each image, those that do not have an aspect ratio of 1.1818 will either have to be cropped or have their aspect ratio changed (squished or elongated).

This is simple plane geometry and cannot be otherwise, no matter how much you might want it to be.

You could fill the box and maintain aspect ratio and center the image. If it doesn't have the same aspect ratio of the box, it will still be cropped, but cropped evenly on all four sides. That would probably require a script modification, and, as I say the image will still be cropped, which I thought you wanted to avoid. I will work that out for you. But only if cropping and centering is acceptable for images with a different aspect ratio than the slideshow.

Scriptor

06-09-2013, 10:04 AM

Yes, I know that cropping will occur. However, the present script crops the bottom and right, if the image is larger than the box. What I'd like to do is have the option to either crop all round (ie. center the image) or crop the top and left-hand side (ie. offset the image). Offsetting the image would be preferable, since there would presumably be more control over where the image is positioned.

If the image fits or is smaller, it will be centered as was always the case. However, if it's smaller it will be made the width of the slideshow and centered vertically unless its height is now greater than the slideshow's, in which case crop, if specified will determine how it's cropped.

If crop is set for 'topleft' and the image is too large, the top and/or left part will be cropped.

If crop is set for 'center' and the image is too large it will be center cropped along the vertical and/or horizontal axis.

If no crop is specified or something other than these two above are used, and the image is too large, it will be cropped off the right and/or bottom edge (what happens normally without this modification).

Scriptor

06-09-2013, 01:10 PM

Thanks John,

Looks simple enough, but it doesn't seem to work unfortunately. Plus, there is an undefined image after the 3rd photo.

http://designline.com.au/news/slides-8.htm

jscheuer1

06-09-2013, 01:18 PM

You need to download and use the modified script. Here it is again (right click and 'Save As'):

5090

Scriptor

06-09-2013, 01:33 PM

Hi John,

This works fine. Thanks very much for your time. Hopefully your good work will also help someone else.

Cheers,

Scriptor

Scriptor

06-09-2013, 01:55 PM

Just one more slight problem John. On reloading the page, it comes up with an undefined image for a few seconds and then the slideshow begins.

http://designline.com.au/news/slides-8.htm

jscheuer1

06-09-2013, 03:02 PM

Using a text only editor like NotePad, in the fadeslideshowratiocrop.js file, near the beginning, find the configuration area:

I have just started using your script and it works perfectly, except when the image is wider than the slideshow. It scales the image as it should, but it doesn't crop it in the center but istead it cuts of the left side.
Can you help fix this?

jscheuer1

08-01-2013, 03:45 PM

First, are you using the updated script (fadeslideshowratiocrop.js)? And have you added the directive , {crop: 'center'} after that slide's entry in the imagearray, example from the user's before you demo:

var reklame3=new fadeSlideShow({
wrapperid: "reklame3", //ID of blank DIV on page to house Slideshow
dimensions: [250, 275], //width/height of gallery in pixels. Should reflect dimensions of largest image

I use the code on this site: http://www.vejlenystenhuggeri.dk/ in the box in the right side of the page, the one under the facebook-box.

I have added these two photos to the slideshow (among others) so you get an idea of what i mean:
http://www.vejlenystenhuggeri.dk/userfiles/image/profil.jpg
http://www.vejlenystenhuggeri.dk/grafik/topgalleri/005.jpg

jscheuer1

08-01-2013, 05:33 PM

Seems fine here. On /grafik/topgalleri/005.jpg it's centered. This script only crops the images, it doesn't resize them unless both their width and their height are too great to fit in the slideshow. If they're both too big, the script chooses the one that's proportionally less out of range and conforms it to the corresponding dimension of the slideshow. Once one of these dimensions is changed to fit, the other is scaled to it and cropped.

Now, the image isn't actually cropped, rather only that part of it that fits in the slideshow is shown. With {crop: 'center'}, that's the center, which is what I see on /grafik/topgalleri/005.jpg

Oh, and you are missing the loading image, see my previous post on that.

JNSoendergaard

08-01-2013, 05:45 PM

Hi again John

Strange, when I look at the slideshow i see the two red hearts which is part of the right side of the picture, I would expect to see the middle part?
Thanks for pointing the loading image out.

jscheuer1

08-01-2013, 06:05 PM

OK, I see (click to enlarge):

5167

What browser are you using?

Oh, and looking at it, I see that, since it's too wide to fit, but not tall enough to fill the slideshow vertically, the script is enlarging it slightly to fit the height. But it is centered.

Hmm, it's centered in IE, Opera, and Firefox, but right aligned in Chrome. Not sure why it's like that in Chrome. I have to run right now. When I have more time I'll look into it.

BTW, I discovered this because I wanted to be able to prevent the script from resizing the images upwards. I've got the script for that now if you're interested. It's an option. unless you set dontscaleup: true, in the new fadeSlideShow() init on the page, it will do it just like it does now.

For your slideshow I think you want it scaling up. Otherwise the profil.jpg and the 005.jpg will not fill the entire slideshow. The profil.jpg would have left and right side matting, the other top and bottom matting. It looks better the way it is now. Here it is (same filename as before):

5170

But for larger slideshows where smaller images would become distorted by being scaled up, it's a nice option.

Thank you very much John, everything works as I wanted it to -your help has been very much appreciated.
I don't need the other script right now, but I think it would be nice if you uploaded it, so that if I ,or some else, needs it in the future, they can find it here :)