jQuery colorbox 插件调整大小回调

Question

我有一个 ASP.NET MVC 应用程序，我正在使用两个 JQuery 插件：colorbox 和 jcrop。我的问题是颜色框调整大小功能。将内容加载到颜色框后，我调用 resize 函数来调整颜色框的大小以更好地适应其内容。这很好用，除了在此之后我立即将 jcrop 插件添加到组合中。 Jcrop 在颜色框调整大小功能完成之前稍微触发。因此，它会扭曲 jcrop 的数据。这会导致裁剪工具在初始移动时跳转，如下例所示：

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

请注意，在上面的示例中，裁剪选择器如何在初始移动时跳转，如以下问题所示：

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

我发现阻止这种情况的唯一方法是将 jcrop 位包装在 setTimeout() 中并将代码延迟 1 秒以确保在代码触发之前完成调整大小，如下例所示：

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

现在，当您拖动裁剪区域时，它一开始不会跳动。使用setTimeout() 绝对是我不喜欢的一种技巧，所以我想知道是否有人有任何建议。如果只有jQuery.colorbox.resize() 接受其设置对象的回调函数。

谢谢！

Answer 1

在 GitHub 的开发版 colorbox 中，有一个提交可以解决您的问题。
看到它here

我认为您应该编辑 jquery.colorbox.js 文件中的函数resize 以接受回调参数。正如链接所建议的那样。

@@ -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);
     }
   };

祝你好运！