JCrop - FancyBox - Jcrop 无法正常工作答案

【问题标题】：JCrop - FancyBox -- Jcrop is not working properlyJCrop - FancyBox - Jcrop 无法正常工作
【发布时间】：2012-02-15 05:43:24
【问题描述】：

Jcrop 在没有 fancybox 的情况下运行良好。但是如果我在 Fancybox 中加载 Jcrop，我将无法裁剪图像。

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

有什么解决办法吗？

【问题讨论】：

我发现fancybox 和jcrop 可以正常工作。我在fancybox中使用图像上传，在下一站，我将上传的图像加载到fancybox中进行裁剪。我发现 jcrop 没有在那里工作......

标签： jquery fancybox jcrop

【解决方案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 的宽度和高度打开。

祝你好运！

【讨论】：

谢谢你。你不知道昨天我花了多少时间试图弄清楚如何阻止 Fancybox 和 JCrop 进行战斗。 +10。
我不记得在自己找到解决方案之前与这个问题斗争了多久，但花了一段时间。很高兴能提供帮助！
我用的是fancybox 3，没有调整大小的方法：/

【解决方案2】：

稍微改编的版本：

$.fancybox({
    href : '/path-to-image.jpg',
    afterShow : function(){
        $( '.fancybox-inner' ).find( 'img' ).Jcrop({                    

        });
    }
});

【讨论】：