Croppie在Jquery Fancybox弹出模式下不工作
我曾经使用Jquery来满足弹出模式中裁剪或缩放图像的要求,我曾经使用fancybox来显示弹出模式中的图像,现在我想在弹出模式中制作裁剪图像或缩放图像,我尝试了,但它不再工作。 我已经做过了Croppie在Jquery Fancybox弹出模式下不工作,jquery,fancybox,croppie,Jquery,Fancybox,Croppie,我曾经使用Jquery来满足弹出模式中裁剪或缩放图像的要求,我曾经使用fancybox来显示弹出模式中的图像,现在我想在弹出模式中制作裁剪图像或缩放图像,我尝试了,但它不再工作。 我已经做过了 <a data-fancybox="gallery" href="{{ asset('public/img/noimage.png') }}" id="fancybox_anchor"> <div id="profile_pic_div" style="background-ima
<a data-fancybox="gallery" href="{{ asset('public/img/noimage.png') }}" id="fancybox_anchor">
<div id="profile_pic_div" style="background-image: url('{{ asset('public/img/noimage.png') }}')"></div>
</a>
当弹出窗口打开时,图像父类是fancybox Image wrap
,这就是为什么我将其作为选择器。在正常模式下,它的工作,但我如何才能做到这一点,它在弹出模式。请帮忙。我完全陷在这里面了
谢谢。下面是一个使用回调初始化croppie并获得结果的更完整示例:
var myCroopie;
$('[data-fancybox="images"]').fancybox({
touch: false,
clickContent: false,
animationEffect: false,
afterLoad : function(instance, current) {
myCroopie = current.$image.croppie({
});
},
beforeClose : function() {
myCroopie.croppie('result', 'html').then(function(html) {
// html is div (overflow hidden)
// with img positioned inside.
$("#rez").html(html);
});
}
});
演示-尝试设置
触摸:false,单击内容:false
(对于fancybox)以禁用默认行为。要应用此选项,请执行什么操作??很抱歉,我不明白你在说什么。@Janis我没有为fancybox编写任何jquery代码。这只是我添加的一个必需资源,简单的锚定标记会打开fancybox。如果你没有注意到,fancybox会捕获所有mousedown、mousemove等事件,以便默认情况下启用滑动/拖动。这就是你可以禁用它的方法。然后它应该可以工作。有点奇怪,但有效-非常感谢兄弟。。。这真的很有帮助
var myCroopie;
$('[data-fancybox="images"]').fancybox({
touch: false,
clickContent: false,
animationEffect: false,
afterLoad : function(instance, current) {
myCroopie = current.$image.croppie({
});
},
beforeClose : function() {
myCroopie.croppie('result', 'html').then(function(html) {
// html is div (overflow hidden)
// with img positioned inside.
$("#rez").html(html);
});
}
});