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({                    

        });
    }
});

JCrop - FancyBox - Jcrop无法正常工作

2 个答案: