1

Jcrop は、fancybox がなくても問題なく動作しています。しかし、Fancybox 内に Jcrop をロードすると、画像をトリミングできません。

画像はブラウザで 2 回表示されます。cssの問題か何かだと思います。

解決策はありますか？

4

2 に答える 2

2

更新: 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 で開きます。

幸運を！

于 2012-04-03T11:36:16.417 に答える
1

わずかに適応したバージョン:

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

        });
    }
});
于 2012-06-29T05:12:49.670 に答える