Auto resize images for viewport/browser window - Thumbnail Viewer II

[gkornbluth]

1) Script Title: Thumbnail Viewer II

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

3) Describe problem:

Hi All,

A client of mine pointed out that recent versions of lightbox and milkbox incorporate an auto resize to fit viewport/browser window function that maintains the aspect ratio of the images whiled shrinking enlarged images to fit, on the fly.

I was wondering if anyone had incorporated this kind of functionality intoThumbnail Viewer II

Thanks,

Jerry Kornbluth

[auntnini]

I was hoping someone answered this because that is what I also (basically) need.

Or any other suggestions about resizing Web images (and keeping aspect ratios) for smaller mobile devices would be helpful.

=============
Let me restate my request. I've yet to really. deeply examine the jQuery and plug-in scripts, but ... WHERE should one look for the re-size functionality? Is re-size part of core jQuery? Or is re-size part of plug-in? And, then, HOW could one "capture" such functionalilty?

[jscheuer1]

I'm open to further explanation on this, but I'm having trouble envisioning how that would work with a script like Thumbnail Viewer II. It has fixed thumbnails or trigger texts and reveals its larger images in a fixed area. Therefore it's best suited for a fixed layout where all your images fit in the box you've designated as the loadarea.

Those other scripts mentioned present the larger image in a box that overlays the window. In that scenario its relatively easy to measure the size of the window and to resize the image and the box to fit if need be. The image's native dimensions are acquired by loading it as a javascript Image Object something like so (jQuery can be used to streamline/allow for more creative uses of the information obtained with this most basic of preload routines):

var im = new Image();
im.onload = function(){
	//im.width and im.height will contain the native dimensions of this image
	//and can be processed here or sent as values to another function
}
im.src = 'path/filename.ext';

To answer auntnini's question, no. jQuery doesn't have a resize method. It does have shortcuts to measure pretty much anything including the window and images, and to set the size of elements. It's just a matter of finding which if either dimension of the image exceeds the corresponding dimension of the window* (minus whatever 'chrome' your box adds to that dimension) by the greatest amount. If that exists, you reduce it by however much it takes and use a ratio of the either actual width/height or actual height/width of the image to come up with the other dimension. Once you have that, you can easily calculate the optimal box size.

Short answer - it's math.


*jQuery measuring methods for the window:

$(window).height() // returns the window's height
$(window).width()  // returns the width