[jQuery] Re: Image resizing

[Glen Lipka]

Felix Geisend hooked me up with some code, which seemed to work perfectly.

function fitObjectInViewPort(zoomedImage)
{
   // Fit's our image in a box with a given width and heigth while
proportions remain,
   // *or* resizes it based on one site proportionally if only width or
height is given

   var objectWidth = zoomedImage.width();
   var objectHeight = zoomedImage.height();

   var boxWidth = ($(window).width()) * maxImagePercent;
   var boxHeight = ($(window).height()) * maxImagePercent;

   widthRatio  = (boxWidth / objectWidth);
   heightRatio = (boxHeight / objectHeight);

   if ((widthRatio < heightRatio) && (widthRatio!=0) || (heightRatio==0))
   {
       ratio = widthRatio;
   }
   else
   {
       ratio = heightRatio;
   }

   new_width = Math.ceil(objectWidth * ratio);
   new_height = Math.ceil(objectHeight * ratio);

   //return array(new_width, new_height);

   new_left = (boxWidth - new_width) / 2;
   new_top = (boxHeight - new_height) / 2;

 bigThumb.animate({width:new_width,height:new_height}, {duration: 750,
easing: "backinout"});

}

My math to figure out how to center it in the viewport is a little sketchy,
but I feel like it's making progress.

Thanks Felix!

Glen

On 6/23/07, Glen Lipka <[EMAIL PROTECTED]> wrote:

I'm sorry I am asking so many questions about this.
Still working on this EaseBox thing.
http://www.commadot.com/jquery/easebox/

My question has to do with finding the proper image size based on the
viewport.

Logic:
maximum height and width of the zoomed image is a percentage of the
viewport.
var maxPercentage = 90%;
this means that height nor width can be more than 90% of the viewport.

if they are both less, then it should maximize to full size.

if width is more and height it less
it should reduce width to maxPercentage and keep height proportional
and vice versa for height more, but width less.

if height and width are higher, then it should pick the one that is higher
and reduce that to maxPercentage of either height orwidth of viewport
depending on which one is more.

Once the image size is calculated, it should center it in the viewport
horizontally and vertically.  I guess that is
left: viewport width - image width /2
top: viewport height- image height/2

Is that right?

Man, this is making me dizzy.

Then I have to put these variables into an animate function.
What is the syntax to do that?

Any help is greatly appreciated.

Glen