Creative Juice Bo. Co. Presents

A JQuery Plug-In to Scale Objects to Fit or Fill Within Another Object

Project Description

CJ Object Scaler will scale an object to either fit or fill within the boundaries of a destination object. I based this plug-in off another JavaScript project I made awhile back, you can read what it does in the CJ Image: Easily Calculate Image Scaling blog enry. It was a nice little function that would help you calculate the size and offsets to use when scaling an image to fit (or fill) within another element. It didn't actually do any scaling, per say, it merely provided you with the numeric amounts to use. The function introduced two scaling methods, Scale To Fit and Scale To Fill.

Example Usage

As always, I've tried to keep things simple. To use the CJ Object Scaler v2.0, you first need to include the script in your page header. Once you do this, you need to have something to scale and something to scale into. Let's assume you have some product images displayed in a grid on a page. It might look something like this:

<ul id="productGrid">
    <li class="product"><img src="images/jacket.jpg" alt="Jacket" /></li>
    <li class="product"><img src="images/hat.jpg" alt="Hat" /></li>
    <li class="product"><img src="images/coat.jpg" alt="Coat" /></li>
    <li class="product"><img src="images/bunnySlippers.jpg" alt="Bunny Slippers" /></li>
</ul>

The plug-in will try it's best to determine what the object dimensions are. So it's not really necessary to provide this information, but I'm not sure how older browsers handle this with images. It might be good practice to include the width and height on those. Also, the plug-in is going to automatically center the object within the destination object. To do this it will apply an absolute positioning to the it. To work properly, the destination object must have it's positioning set to either relative or absolute. The CJ Object Scaler will try to determine if this is set. If not, it will set the positioning to relative. Here's the CSS for this example:

ul#productGrid {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#productGrid li {
    position: relative;
    display: block;
    width: 190px;
    height: 150px;
    border: 1px solid #ccc;
    float: left;
    margin-right:
    10px; margin-bottom:
    10px; overflow: hidden;
}

And here's how you would call the plug-in to begin your scaling:

$("#productGrid li img").cjObjectScaler({
    destObj: $("#productGrid li img").parent("li"), // must be a jQuery object (required)
    method: "fit", // can either be fit or fill (default fill)
    fade: 800 // if a positive integer, will hide and fadeIn object n duration (default 0)
});

If you notice, I am passing the parent of the current image to the function. The destObj must be a jQuery object. If you are using selectors to choose your objects, be sure you are passing the objects parent. Since in our example, all the <li>'s are the same size, you could in theory pass the first occurrence of one to the plug-in and everything would still look the same. You can also specify which scaling method to use. Your options are "fit" and "fill" (fill is the default). The last option, fade, determines if you would like to hide your object(s) and then do a fadeIn once the scaling is complete. If you provide a positive integer, this will determine the fadeIn duration in milliseconds. The default value is 0, which does not do the effect.