jquery - JCrop - FancyBox -- Jcrop 无法正常工作

Question

Jcrop 在没有 fancybox 的情况下也能正常工作。但是如果我在 Fancybox 中加载 Jcrop，我将无法裁剪图像。

图像在浏览器中显示两次。我猜应该是css问题或者什么的。

有什么解决办法吗？

Answer 1

更新:在 Fancybox 2 中，“onComplete”函数已重命名为“afterShow”。如果您已升级，请相应地更改代码:)

尝试设置图像源并在 fancybox 的“oncomplete”回调上运行 Jcrop，它应该可以正常工作:

<script type="text/javascript">
$(document).ready(function() {
  var imagetoload = '/path/to/yourimage.jpg' /* Set to your image here */
  $('.fancyboxitem').fancybox(
  {
    'content':'<div><img id="jcropImage" /></div>', 
    'onComplete':function() 
      {
        $('#jcropImage')
          .attr('src', imagetoload)
          .Jcrop(
            { 
            /* Jcrop settings here */
            },
            function() { $.fancybox.resize(); /*Jcrop onload callback */ }); 
      }
  });
});
</script>

<a href="#" class="fancyboxitem">Open fancybox</a>

如果您没有设置 Jcrop 对象和 fancybox 的宽度和高度，则需要在加载 Jcrop 对象后运行 $.fancybox.resize() 作为回调。由于您动态加载图像，fancybox 将以 0 的宽度和高度打开。

祝你好运!