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

Question

没有fancybox，Jcrop 运行良好。但是如果我在 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() 作为回调。由于您正在动态加载图像，因此花式框将以 0 的宽度和高度打开，否则。

祝你好运！

Answer 2

稍微改编的版本：

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

        });
    }
});