Serial Image Presentation, Different Dimensions

[marain]

I'm confident this can be done readily with server-side programing, but can it be done with client-side programing, i.e. JavaScript? What I would like to do is to have an image on the page change after x number of seconds, but the successive images to fill the position will not all have the same height and width specifications.

Thanks for any assistance.

A.

[djr33]

I don't really follow. Server-side programming just generates text (eg, HTML, Javascript, CSS), so I don't see how that would help there-- it could generate whatever HTML you need, but it would still need to be worked out client-side.

Certainly this is possible with Javascript (which is client-side), but I don't know exactly what you're asking for.

It sounds more like a layout/logic problem than anything too difficult to program-- how do you want the different dimensions to be handled? Do you want the images to be scaled? A border added? Or do you want the page to shift as the differently-sized images take up less space? All of that is possible and not even too difficult, but you'll first have to figure out how you'd want this to look visually.

In fact, if you just start playing with various slideshows you'll probably find various ways that they handle differently sized images. Maybe one will work as-is. I doubt any/many of them actually block the use of different sizes :)

[marain]

My understanding is that server-side programming would help because it could specify the changed dimensions as it resends the page. Now if the dimensions were specified with JavaScript when the page was first loaded, just changing those dimensions using JavaScript would not reload the page. So it seems to me that the space allocation for the subsequent image would not fit what the browser originally allocated. That is, it would be too big, or too small. If that understanding is correct, then my impression would be that the only way to resize the area allocated for the image would be to reload the page. But that is what I would like to avoid, if possible.

[djr33]

Server-side programming could allow you to get the dimensions of an image from the file itself; but you can do that (at least indirectly) in Javascript as well, or just include the dimensions in the settings of the script. I take it you want to find the dimensions of the largest image? In Javascript, preloading all of the images would be the best way to find that out; serverside you could do this using PHP for example, but it could potentially be a little slow if they are particularly large images. It's certainly possible, but regardless the rest would be client-side.

So is the only problem getting the image dimensions?

Which approach do you want to take?

1) Specify the dimensions manually in the script settings.
(This is fine unless you might not know what images will be included-- in that case, you're probably using a serverside language anyway.)
This could be done either by specifying a single size for the largest image (giving dimensions in which the others would also fit), or you could specify dimensions for all images (and find the largest one easily), which would allow you to also set less-than-full-size dimensions for certain (eg, large) images if desired.

2) Client-side: preload the images and check the dimensions of each.
(There would be a possible delay depending on how many images you included and how large they were.)

3) Server-side: read the dimensions directly from the file, or actually inspect the data in the image (eg, the pixel information) and figure out dimensions.
I'm not entirely certain that this would always be accurate-- the dimensions stored in an image file are usually right but I'm not sure there's a guarantee. And if you actually read the pixel data it would be a significantly slow process.
Perhaps combining (1) and (3) would work-- read the dimensions of the images when uploaded and save those somewhere else (eg, a database) and then output those into the settings for the script from that other location, rather than reading each image and finding the dimensions each time the page loads.

If you want to do this with PHP, here's the function you'd probably want to use:
http://www.php.net/manual/en/function.getimagesize.php



The best method really depends on whether you're already using a serverside language to set up the script, whether the slideshow's content will change often, how much flexibility you'll want, and whether you want to deal with programming something more complex rather than just finding the dimensions and writing those in yourself.

[marain]

Ah, your thoughts clarify things for me greatly.

What I think you're suggesting is that if I specify the largest length and the largest width that I'll be using, I'll be OK because any images that are smaller will obviously fit. I'd still need to have the script manually load the dimensions for each individual image in order to not have the graphic distorted by stretching either the length or the width. So then what I'd have to test is how the browser treats, let's say a 300 x 400 image when space was initially allowed for a 400 x 500 image. On reflection, that might be an unwise thing to implement because there might be great inconsistencies in how the different browsers would handle that situation. So perhaps I'm still relegated to server-side programming, unless I can come up with images all of the same dimensions.

A.

[djr33]

What I think you're suggesting is that if I specify the largest length and the largest width that I'll be using, I'll be OK because any images that are smaller will obviously fit.Yes, this is one way to approach it.
You can do that by just knowing the largest dimensions yourself and typing them in, or by using any of the methods above (in my last post).


I'd still need to have the script manually load the dimensions for each individual image in order to not have the graphic distorted by stretching either the length or the width. So then what I'd have to test is how the browser treats, let's say a 300 x 400 image when space was initially allowed for a 400 x 500 image. On reflection, that might be an unwise thing to implement because there might be great inconsistencies in how the different browsers would handle that situation. So perhaps I'm still relegated to server-side programming, unless I can come up with images all of the same dimensions.Hm. For valid HTML I think you're supposed to have image dimensions, but browsers tend to do just fine without them and then will show the image at full size rather than stretched. You could also, I suppose, get the dimensions using Javascript after that image loads (it would be a little complicated) but I don't know if, in the rare event that the browser requires the dimensions, Javascript would know them if the HTML didn't-- probably not. So I don't see that solving anything except that it would solve the technicality of having image dimensions in the HTML to make it valid. But of course if this is all generated by Javascript anyway, the page will be valid until the JS runs and after that few people would check/care if it's working for them.

I don't know of any browsers that can't figure out how large an image is without being told. Does anyone else have a different experience?

[jscheuer1]

How about a slideshow that adapts to different sized images? Perhaps one of these:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Or one that adapts the images to the space allotted:

http://www.dynamicdrive.com/dynamicindex14/bgcarousel.htm

[marain]

John, I'll check it out. (Unfortunately, I enter a time crunch again, so won't get to it quickly.)

Thanks to both you and Dan.

A.

[marain]

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm appears to be EXACTALLY what I am looking for.

Thank you.

A.