javascript - jQuery colorbox 插件调整大小回调

Question

我有一个 ASP.NET MVC 应用程序，我正在使用两个 JQuery 插件:colorbox 和 jcrop。我的问题是颜色框调整大小功能。将内容加载到颜色框后，我调用调整大小函数来调整颜色框的大小以更好地适应其内容。这很好用，除了之后我立即将 jcrop 插件添加到组合中。 Jcrop 在 colorbox resize 函数完成之前稍微触发。因此，它会扭曲 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() 绝对是我不喜欢的 hack，所以我想知道是否有人有任何建议。如果只有 jQuery.colorbox.resize() 在其设置对象上接受回调函数。

谢谢!

Answer 1

在 GitHub 的 colorbox 的开发版本中，有一个 commit 解决了你的问题。
看吧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);
     }
   };

祝你好运!