JCrop - FancyBox - Jcrop無法正常工作

Jcrop工作良好，沒有fancybox。但是，如果我在Fancybox內加載Jcrop，我無法裁剪圖像。JCrop - FancyBox - Jcrop無法正常工作

圖像在瀏覽器中顯示兩次。我想這應該是一個CSS問題什麼的。

有沒有解決方法？

2012-02-15 Kamini

我發現的fancybox和jcrop正常工作。我在fancybox中使用圖片上傳，在下一站中，我將上傳的圖片加載到fancybox中進行裁剪。我發現jcrop不在那裏工作... – Kamini 2012-02-16 13:31:10

更新：在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>

」 t設置Jcrop對象和fancybox的寬度和高度，您需要在加載Jcrop對象之後運行$ .fancybox.resize（）作爲回調。由於您正在動態加載圖像，所以fancybox將以寬度和高度打開，否則將打開。

祝你好運！

來源

2012-04-03 11:36:16 Jan

謝謝你。你不知道昨天我花了多少時間試圖弄清楚如何讓Fancybox和JCrop不再做戰鬥。 +10。 – sehummel 2013-06-19 18:17:32

我不記得我自己找到解決方案之前多久與之對抗，但花了一段時間。很高興能夠提供幫助！ – Jan 2013-06-27 14:52:36

我正在使用fancybox 3，並沒有調整大小的方法：/ – NewbieProgrammer 2018-01-25 09:18:09

稍微改編版：

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

     }); 
    } 
});

來源

2012-06-29 05:12:49 ski

JCrop - FancyBox - Jcrop無法正常工作

回答

相關問題