Results 1 to 3 of 3

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

  1. #1
    Join Date
    Feb 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default

    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?
    Last edited by auntnini; 02-26-2012 at 09:17 PM. Reason: restate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    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:

    Code:
    $(window).height() // returns the window's height
    $(window).width()  // returns the width
    Last edited by jscheuer1; 02-28-2012 at 12:40 AM. Reason: quoting syntax
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    auntnini (02-27-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •