Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ Object Scaler 2.1.2

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.

CJ Object Scaler Example

Basic Syntax

$(object).cjObjectScaler(options, callback);

Image Example

As always, I've tried to keep things simple. To use the CJ Object Scaler v2.1.2, 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" class="clearfix">
   <li class="product"><img src="http://www.travelizmo.com/archives/The-North-Face-Met-5-Jacket.JPG" alt="Jacket" /></li>
   <li class="product"><img src="http://www.sixapart.com/i/wrench_hat.jpg" alt="Hat" /></li>
   <li class="product"><img src="http://www.wise4living.com/ccoat/images/wool_coat.jpg" alt="Coat" /></li>
   <li class="productLink"><a href="demo1.cfm"><img src="http://www.cobankopegi.com/b/bunnyslippers.jpg" alt="Bunny Slippers" /></a></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. If you plan on using the fill scale method, then you should set the overflow CSS property to hidden. Not doing so, will result in the image being visible outside the destination object's bounds. 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 {
   display: block;
   width: 190px;
   height: 150px;
   border: 1px solid #ccc;
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   overflow: hidden;
}

ul#productGrid li a {
   border: 0;
}

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

// the first call sets the first 3 LI's
$("#productGrid li img").each(function() {
   $(this).cjObjectScaler({
     method: "fit",
     fade: 800
   });
});

// we take in account the link on the 4th LI
$(".productLink img").each(function() {
   $(this).cjObjectScaler({
     destElem: $(this).parent().parent(),
     method: "fill",
     fade: 150
   });
});

If you notice, I did not need to need to provide a parent object for the first call. The images are going to be scaled based on their parent object, which in this case are the LI's. But for the second call, we have an image placed within a link. In this case, we need to tell the function to scale it based on it's parent LI container. To do this, we just add the destElem variable and pass the parent location as 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). Fit will scale the object to fit within the destination element. Fill will enlarge it to fill the destination object.

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 trigger the effect.

 

Object Example

CJ Object Scaler isn't limited to just scaling images. It can also be used to scale any object. Not sure what you would use it for, but it will do it just the same. The function will take in account any BORDER width on the source object as well.

HTML Code
<div id="bigObject">
   <div id="smallObject"></div>
</div>
jQuery Code
$("#smallObject").cjObjectScaler({
   method: "fit",
   fade: 550
});

Callback Example

If you wish to perform another operations once the scaling is complete, you can provide a callback function to the plug-in as well. This function will be called once the scaling is complete. Simply add your function after the passed settings.

jQuery Code
$("#smallObject").cjObjectScaler({
   method: "fit",
   fade: 550
}, function() {
	alert("The object has been scaled...");
});

Using With Dynamic Images/Objects

CjBoCo user, Funger, was having problems using the last version with dynamically generated images. He was using a single <img> tag and dynamically changing the src attribute based on user input. A weird caching issue popped up that caused the scale dimensions used in the calculation to always be the first image set. So if the first image has a dimension of 100 x 100 pixels, then no matter what the other images dimension were CJ Object Scaler would always use the 100 x 100. This updated version now set the object's width and height to "auto" prior to performing its scaling operation. It seems to work nicely. But as always, if anyone experiences any problems, please let me know.

Arguments

ArgumentDescriptionTypeDefault
destElemThe jQuery parent object in which to scale into. If not passed, it will use it's immediate parent. (This argument is optional)jQuery ObjectjQuery(obj).parent()
methodThe scaling method in which to use. Options are fit or fill. (This argument is optional)stringfill
fadeIf greater than zero, the plug-in will hide the object and once it is loaded and scaled, it will fade the object back into view. The integer amount is in milliseconds. (This argument is optional)integer0
callbackA user supplied function which is called once the object has been scaled.functionnull

Conclusion

As always, if you have any problems, let me know. I've tested this pretty thouroughly in Safari, FireFox and Internet Explorer 8. But if you come across a case where your having problems, be sure to come back and let me know.

Release Notes

Version 2.1.2 is a minor update that adds the ability to supply a callback function which will be called once the object has been scaled.

A big thanks goes out to user Chris Bellew for this suggestion. Thanks Chris!