Question

I want to make this script to work as LIVE() function.
Please help me!

 $(".img img").each(function() {
    $(this).cjObjectScaler({
   destElem: $(this).parent(),
      method: "fit"
    });
 });

the cjObjectScaler script (called in the html header) is this: (thanks for Doug Jones)

(function ($) {
 jQuery.fn.imagesLoaded = function (callback) {
  var elems = this.filter('img'),
   len = elems.length;
  elems.bind('load', function () {
   if (--len <= 0) {
    callback.call(elems, this);
   }
  }).each(function () {
   // cached images don't fire load sometimes, so we reset src.
   if (this.complete || this.complete === undefined) {
    var src = this.src;
    // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
    this.src = '#';
    this.src = src;
   }
  });
 };
})(jQuery);

/*
 CJ Object Scaler
*/
(function ($) {
 jQuery.fn.cjObjectScaler = function (options) {

  /* 
   user variables (settings)
  ***************************************/
  var settings = {
   // must be a jQuery object
   method: "fill",
   // the parent object to scale our object into
   destElem: null,
   // fit|fill
   fade: 0 // if positive value, do hide/fadeIn
  };

  /* 
   system variables
  ***************************************/
  var sys = {
   // function parameters
   version: '2.1.1',
   elem: null
  };

  /* 
   scale the image
  ***************************************/

  function scaleObj(obj) {

   // declare some local variables
   var destW = jQuery(settings.destElem).width(),
    destH = jQuery(settings.destElem).height(),
    ratioX, ratioY, scale, newWidth, newHeight, 
    borderW = parseInt(jQuery(obj).css("borderLeftWidth"), 10) + parseInt(jQuery(obj).css("borderRightWidth"), 10),
    borderH = parseInt(jQuery(obj).css("borderTopWidth"), 10) + parseInt(jQuery(obj).css("borderBottomWidth"), 10),
    objW = jQuery(obj).width(),
    objH = jQuery(obj).height();

   // check for valid border values. IE takes in account border size when calculating width/height so just set to 0
   borderW = isNaN(borderW) ? 0 : borderW;
   borderH = isNaN(borderH) ? 0 : borderH;

   // calculate scale ratios
   ratioX = destW / jQuery(obj).width();
   ratioY = destH / jQuery(obj).height();

   // Determine which algorithm to use
   if (!jQuery(obj).hasClass("cf_image_scaler_fill") && (jQuery(obj).hasClass("cf_image_scaler_fit") || settings.method === "fit")) {
    scale = ratioX < ratioY ? ratioX : ratioY;
   } else if (!jQuery(obj).hasClass("cf_image_scaler_fit") && (jQuery(obj).hasClass("cf_image_scaler_fill") || settings.method === "fill")) {
    scale = ratioX < ratioY ? ratioX : ratioY;
   }

   // calculate our new image dimensions
   newWidth = parseInt(jQuery(obj).width() * scale, 10) - borderW;
   newHeight = parseInt(jQuery(obj).height() * scale, 10) - borderH;

   // Set new dimensions & offset
   jQuery(obj).css({
    "width": newWidth + "px",
    "height": newHeight + "px"//,
   // "position": "absolute",
//    "top": (parseInt((destH - newHeight) / 2, 10) - parseInt(borderH / 2, 10)) + "px",
//    "left": (parseInt((destW - newWidth) / 2, 10) - parseInt(borderW / 2, 10)) + "px"
   }).attr({
    "width": newWidth,
    "height": newHeight
   });

   // do our fancy fade in, if user supplied a fade amount
   if (settings.fade > 0) {
    jQuery(obj).fadeIn(settings.fade);
   }

  }

  /* 
   set up any user passed variables
  ***************************************/
  if (options) {
   jQuery.extend(settings, options);
  }

  /* 
   main
  ***************************************/
  return this.each(function () {

   sys.elem = this;

   // if they don't provide a destObject, use parent
   if (settings.destElem === null) {

    settings.destElem = jQuery(sys.elem).parent();
   }

   // need to make sure the user set the parent's position. Things go bonker's if not set.
   // valid values: absolute|relative|fixed
   if (jQuery(settings.destElem).css("position") === "static") {
    jQuery(settings.destElem).css({
     "position": "relative"
    });
   }

   // if our object to scale is an image, we need to make sure it's loaded before we continue.
   if (typeof sys.elem === "object" && typeof settings.destElem === "object" && typeof settings.method === "string") {

    // if the user supplied a fade amount, hide our image
    if (settings.fade > 0) {
     jQuery(sys.elem).hide();
    }

    if (sys.elem.nodeName === "IMG") {

     // to fix the weird width/height caching issue we set the image dimensions to be auto;
     jQuery(sys.elem).width("auto");
     jQuery(sys.elem).height("auto");

     // wait until the image is loaded before scaling
     jQuery(sys.elem).imagesLoaded(function () {
      scaleObj(this);
     });

    } else {

     scaleObj(jQuery(sys.elem));
    }

   } else {

    console.debug("CJ Object Scaler could not initialize.");
    return;

   }

  });

 };
})(jQuery);

Answer 1

.live() doesn’t work for this, you need to either fire the function again when needed, e.g. in your $.ajax() success or complete callbacks, in .ajaxSuccess(), .ajaxComplete(), or use the .livequery() plugin.

.live() listens for events to bubble…it doesn’t have any interaction when new elements are added, so it’s not suited for plugins, at least ones that aren’t triggered based on an event.