JCrop - FancyBox - Jcropが正しく動作しない

Question

Jcropはファンシーボックスなしで正常に動作しています。 しかし、私がFancyboxの中にJcropをロードすると、イメージをトリミングすることができません。

イメージはブラウザで2回表示されます。 私はそれが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({      

     }); 
    } 
});