I had used Jquery Croppie for requirement of crop or scale image in popup model, I had used fancybox for show image in popup, now i want to make crop image or scale image in popup modal i tried but its not working anymore. I had done popup modal with,
<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>
Popup model is perfectly showing the image but now i want to make it crop, scale, resize using croppie I had tried like ,
$( '.fancybox-image-wrap img' ).croppie({
enableExif: true,
viewport: {
width: 250,
height: 250,
},
type: 'circle',
boundary: {
width: 300,
height: 300
}
});
When Popup opens Image parent class is fancybox-image-wrap thats why i take it as a selector. In normal mode its working but how can i do that it in popup model. Please help. I am totally stuck in this.
Thank you.
Here is a more complete example of using callbacks to initialise croppie and to get result:
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);
});
}
});