Question

I have an ASP.NET MVC application and I am using two JQuery plugins: colorbox and jcrop. My issue is with the colorbox resize function. After I load the content into the colorbox I call the resize function to resize colorbox to fit its contents better. This works great except for the fact that immediately after that I add the jcrop plugin to the mix. Jcrop fires slightly before the colorbox resize function finishes. Because of this, it distorts the data for jcrop. This causes the crop tool to jump on the initial move, as in this example:

http://jsfiddle.net/Xg84D/12/

Notice how in the above example the crop selector jumps on the initial move, as in this question:

jQuery Jcrop setSelect shows visually, but when clicked to move, it jumps

The only way I have found to stop this, is to wrap the jcrop bit in a setTimeout() and delay the code for 1 second to ensure the resize is finished before the code fires, as in this example:

http://jsfiddle.net/Xg84D/13/

Now when you drag the crop area it does not jump around at first. Using setTimeout() is definitely a hack that I don’t like so I’d like to know if anyone has any suggestions. If only jQuery.colorbox.resize() accepted a callback function on its settings object.

Thanks!

Answer 1

In the development version of colorbox at GitHub, there’s a commit that solves your problem.
See it here

I think that you should edit the function resize in jquery.colorbox.js file to accept a callback parameter. AS the link suggest.

@@ -450,7 +450,7 @@    
     });    
   };     

-  publicMethod.resize = function (options) {    
+  publicMethod.resize = function (options, loadedCallback) {    
     if (open) {    
       options = options || {};

@@ -475,7 +475,7 @@

       }

       $loaded.css({height: settings.h});           

-      publicMethod.position(settings.transition === "none" ? 0 : settings.speed);    
+      publicMethod.position(settings.transition === "none" ? 0 : settings.speed, loadedCallback);
     }
   };

Good luck!