当前位置：文江博客话题详情

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

发布于 2025-01-05 05:48:25 字数 127 浏览 4 评论 0原文

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

图像在浏览器中显示两次。我猜应该是css问题或者什么的。

有什么解决办法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界如花海般美丽 2025-01-12 05:48:26

稍作修改的版本：

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

        });
    }
});

Slightly adapted version:

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

        });
    }
});

回复收藏 0 原文

半衬遮猫 2025-01-12 05:48:25

更新：在 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 的宽度和高度打开。

祝你好运！

Update: In Fancybox 2 the "onComplete" function has been renamed to "afterShow". Change code accordingly if you've upgraded :)

Try setting the image source and running Jcrop on the "oncomplete"-callback of fancybox and it should work just fine:

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

If you don't set a width and height of the Jcrop object and fancybox you need to run $.fancybox.resize() as a callback after you've loaded the Jcrop object. Since you're loading the images dynamically the fancybox will open with a width and height of 0 otherwise.

Good luck!

回复收藏 0 原文

~没有更多了~