adriengibrat / jquery-crop Goto Github PK

// 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.

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,
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

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.

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).