We Keep Coding

Cropper.js only enable zoom

Is it possible to disable all cropper functionality and only enable cropper.zoom() for example?
If I disable cropper with cropper.disable() it disables everything.

From the source code it’s seems that this option isn’t supported:
// Disable (freeze) the cropper
disable() {
if (this.ready && !this.disabled) {
this.disabled = true;
addClass(this.cropper, CLASS_DISABLED);
}
return this;
},
Source:
https://github.com/fengyuanchen/cropperjs/blob/89f0b50c7f580135582a087cbf2417126b67d5fd/src/js/methods.js#L137
You can open an issue or do it yourself...

One possible way to do it is by setting these options like this:
autoCrop: false,
dragMode: 'move

This configuration might help:
config: any = {
dragMode: 'none',
highlight: false,
modal: false,
responsive: true,
scalable: true,
autoCrop: false,
center: false,
background: false,
zoomable: true,
zoomOnWheel: true,
};

Showing half of the prev and next images in owl carousel

I have implemented owl carousel in my application. I need to show half of prev and next images on the modal gallery of main image.
The modal gallery opens when you click on the main bigger image of the page. I tried to set stagePadding property, but it didnt work out.
Can I achieve the same without stagePadding property.
I have implemented thumbnails and other parts. You can view the implemented fuctionality here.
https://www.realtor.com/realestateandhomes-detail/6836-Xana-Way_Carlsbad_CA_92009_M29922-47778
galleryId.owlCarousel({
items: 1,
loop: true,
margin: 5,
startPosition: 1,
animateOut: 'fadeOut',
navSpeed: 100,
lazyLoad: true,
dots: false,
nav: true,
stagePadding: 100,
});

i had the same problem and my problem was solved with center:false.
$(".owl-carousel").owlCarousel({
center:false,
nav: true,
dots: false,
loop: true,
autoHeight: true,
autoWidth:false,
stagePadding: 10,
margin: 30
});

Remove Snap Back in OwlCarousel when using SinglePage setting

Currently I am experiencing a snap back from the last image to the first when OwlCarousel reaches the last image. I would prefare it to continuously repeat in the same direction.
Is there a setting for this?
Currently the code is:
g.owlCarousel({
navigation: false,
slideSpeed: 500,
items: 1,
pagination: false,
loop: true,
mouseDrag: false,
touchDrag: false,
autoPlay: true,
singleItem: true
});

TinyMce - Can i set editor height to 40px which have to allow autoresizing

I have to set the editor height to 40px, please look to this problem, i tried many times. is there any minimum height for tinymce iframe?

I got a solution to this problem
tinymce.init({
selector: "textarea",
plugins: ["paste autoresize"],
icon: false, menubar: false, statusbar: false, toolbar: false, autoresize_bottom_margin: 2, object_resizing: false,
paste_as_text: true, force_br_newlines: false, forced_root_block: false, autoresize_min_height: 40, autoresize_max_height: 300})
it achieved by setting forced_root_block: false

There's not a minimum. Find in code height and define it like this -> height : 40

How to set crop box in jquery cropper

I'm using cropper, it's a jquery plugin I found at cropper web site.
I have an image size full hd 1920w on 1080h, and I need to give the user ability to crop in fixed box size 675*1080, my question is how do I set the options of this plugin ?
I've tried to do the follow with no success:
var c1 = $('.cropper-example-1 img').cropper({
//aspectRatio: 10 / 16,
strict: true,
background:false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
mouseWheelZoom: false,
touchDragZomm:false,
built: function () {
//alert(1);
// $(this).cropper('setData', 0, 0, 675, 1080,90);
// $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
}
});

After soo many trials this worked for me... i needed to set the initial width and height to 240px by 607px and this is my code.
var cropper;
var imgx;
$(function(){
var imgx = $('#cpdiv').find('img');
cropper = new Cropper(imgx[0], {
//aspectRatio: 1/2,
autoCropArea: 0,
strict: false,
guides: false,
highlight: true,
dragCrop: false,
//cropBoxMovable: false,
cropBoxResizable: false,
data:{
width: 240,
height: 607,
},
crop(event) {
console.log(event.detail.width);
console.log(event.detail.height);
},
});
});
i tried using the setCropBoxData({}) function which didnt work.. but this approach worked for me.

Try like this add autoCropArea: 0.5, and changes the built method
var $image=$('.cropper-example-1 img');
$image.cropper({
//aspectRatio: 10 / 16,
strict: true,
background:false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
mouseWheelZoom: false,
touchDragZomm:false,
autoCropArea: 0.5,
built: function () {
//alert(1);
// $(this).cropper('setData', 0, 0, 675, 1080,90);
// $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
$image.cropper('setCanvasData', 0, 0, 1920, 1080));
$image.cropper('setCropBoxData', 0, 0, 675, 1080);
}
});

built: function () {
//$image.cropper('setCropBoxData', 0, 0, 675, 1080);
$image.cropper("setCropBoxData", { width: 160, height: 80 });
or
$image.cropper("setCropBoxData", { left: 0, top: 0, width: 160, height: 80 });
}

If you want to make CropBox selection fit to Canvas use this
autoCropArea: 1,
To make CropBox selection has margin 50% from the Canvas
autoCropArea: 0.5,

try to limit its height and width on cropper.js.. not the best option but it fixed my problem. When user try to minimize the cropbox, it will stop at the set size creating a not so bad solution for now..:')
minCropBoxWidth: 350,
minCropBoxHeight: 350

Working code to set crop box. I am using jQuery Cropper v1.0.0
var $image = $(".image-crop > img");
var init_data = { x: parseFloat($("#event_crop_x").val()), y: parseFloat($("#event_crop_y").val()), width: parseFloat($("#event_crop_w").val()), height: parseFloat($("#event_crop_h").val()) };
$($image).cropper({
zoomable: false,
aspectRatio: 2 / 1,
preview: ".img-preview",
crop: function(event) {
$("#event_crop_x").val(event.detail.x);
$("#event_crop_y").val(event.detail.y);
$("#event_crop_w").val(event.detail.width);
$("#event_crop_h").val(event.detail.height);
},
data: init_data
});