adriengibrat / jquery-crop Goto Github PK

I tried this on my tablet, and the widget doesn't seem to work.

Are there plans to make pan/zoom work with touch controls? (i.e. pinch-zoom instead of scroll, and touchmove instead of dragging).

Hi,
Have you ever tried enabling this plugin with bootstrap framework?
The responsive image setup with bootstrap seems to interfere with jquery resizing the image.
I setup 2 fiddles to show you.

http://jsfiddle.net/sr3hw/ - works as expected

http://jsfiddle.net/MCqea/ - not working with bootstrap enabled

Thanks for this plugin, I have been using it for a while, and even adapted it to use a jquery ui slider instead of the buttons.

An "issue" I'm facing now is if I have { width: 200, height:200 } and the user uploads an image that is <= 200 x 200 the zoom controls do nothing because minPercent is already >= 1.

The other scenario that makes the behavior strange is if the user uploads an image @ 210x210. the click controls only zoom 1px per click (assuming { step:10 } ).

Even though images would get pixelated, I think I'd like to allow them to zoom past minPercent.

Any thoughts on a tweak to allow this?

thanks

Hi there,

There seems to be an issue with crop in IE8 and 9. Works great everywhere else. I have a system where the user uploads an image and then afterwards they pick the crop position and zoom they want on the image (essentially creating a profile pic).

I call crop as follows after a success message from my ajax upload script. It looks like this

$("#my-mask").html("img class="crop" src="assets/large/" + obj.msg + ""/");

                    $( '.crop' ).each( function () {
                        var image     = $( this )
                            , crop    = image
                                .crop( {
                                    width      : 220
                                    , height   : 220
                                    , loading  : '.....'
                                    , controls : 'Drag to move, scroll to zoom'
                                } )
                                .on( 'crop', function( event ) {
                                    $('#crop_x').val( event.cropX );
                                    $('#crop_y').val( event.cropY );
                                    $('#crop_w').val( event.cropW );
                                    $('#crop_h').val( event.cropH );

                                    $('.cropX').text( event.cropX );
                                    $('.cropY').text( event.cropY );
                                    $('.cropW').text( event.cropW );
                                    $('.cropH').text( event.cropH );
                                } )
                                .data( 'crop' );
                        image
                            //.on( 'dblclick', $.proxy( crop.zoomIn, crop ) )
                            .on( 'mousewheel', function ( event ) {
                                return event.originalEvent.wheelDelta < 0 ? 
                                    crop.zoomIn() :
                                    crop.zoomOut();
                            } );
                    } );

My mask is the div where I put the image in for people to see and move around.

For some reason in IE8 and 9 - the image appears - the controls are there - but nothing works and does a weird scaling to the image leaving a big gap at the bottom. Also it always updates crop x and y as 0 each and crop w and crop h as 28 each.

Screen shot attached:

Any ideas?

Is there a way to have multiple images with different sizes? I basically have 2 images on the page. One is 185px x 185px and the other one is 830px x 300px. It appears that when both are loaded, the first image takes the dimensions of the second image. Both images become 830 x 300.

Also, how do I make the plugin work when I load images dynamically? When I load the images dynamically, the zoom in / out no longer work.

Thanks.

// zoom on scroll
image
.on( 'mousewheel', function ( event ) {
return event.originalEvent.wheelDelta < 0 ?
crop.zoomIn() :
crop.zoomOut();
} );

This is not working in firefox. In all other browsers this is working fine.