JCrop - FancyBox -- Jcrop不能正常工作

Question

Jcrop在没有fancybox的情况下工作得很好。但是如果我在Fancybox中加载Jcrop，我就不能裁剪图像。

图像在浏览器中显示两次。我想这应该是一个css的问题或什么。

有什么解决方案吗？

Answer 1

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

尝试设置图像源并在fancybox的"oncomplete"-callback上运行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打开。

祝好运!

Answer 2

稍微改编的版本：

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

        });
    }
});