Zoom in zoom out working weird

[CristinaNicolae]

How I am using this plugin:

1. I upload an image
2. I put the guillotine on the image
3. I can upload other image (change the image) and put the guillotine. and so on..

When I change the picture the zoom factor becomes bigger. If I zoom in once is twice bigger than the last one.

This is the code I am using:

    $('#upload').fileupload({
        url : link,
        singleFileUploads : true,
        dataType : "json",
        add : function(e, data) {

            data.submit();
            $('.loadingGIF').show('fade');
            $('#logoSaved').hide('fade');
            $('#orig_image').hide();
            $('.alert-default').hide();
        },
        done : function(e, data) {
            $('#saveYourLogo').removeClass('disabled');
            $("#errorMessage").addClass("hidden");
            $('.alert-default').show();
            $('#orig_image').show();
            $('.loadingGIF').hide();
            $('#newImage').hide();
            $('#AfterImageUpload').show('fade');
            $('#saveYourLogo').show('fade');
            $('#save_span').show('fade');
            $('.cropbuttonscontainer').show('fade');
            console.log("data:" + data); 
            //var json = JSON.parse(data.result);
            //console.log("json:" + json); 
            var prop;
            json = data.result; 
            //console.log("json temp:" + json["temp_img_id"]); 
            if (json.file == null) {
                var ctx = "${pageContext.request.contextPath}";
                $("#ok_width").val(json.ok_width);
                $("#ok_height").val(json.ok_height);
                $("#img_w").val(json.img_w);
                $("#img_h").val(json.img_h);
                var w = json.img_w, h = json.img_h;
                if (w == h) {
                    $('#zoom_in').addClass('disabled');
                    $('#zoom_out').addClass('disabled');
                    $('#fit').addClass('disabled');
                    setTimeout(function() {
                        $('#saveYourLogo').click()
                    }, 1000);
                } else {
                    $('#zoom_in').removeClass('disabled');
                    $('#zoom_out').removeClass('disabled');
                    $('#fit').removeClass('disabled');
                }
                $("#image_id").val(json.temp_img_id);
                ok_width = json.ok_width;
                ok_height = json.ok_height;
                $("#orig_image").attr("src", "<c:url value="/resources/upload/temp_images/"/>" + json.temp_img_id + "_photo." + json.temp_img_ext);
                $("#partial_temp_img_id").val(json.temp_img_id);

                var picture = $('#orig_image');
                //picture.guillotine('remove');

                picture.on('load', function() {
                    // Initialize plugin (with custom event)
                    //  picture.guillotine({eventOnChange: 'guillotinechange'});
                    //picture.guillotine({width: 200, height: 200});
                    picture.guillotine({
                        eventOnChange : 'guillotinechange',
                        width : ok_width,
                        height : ok_height,
                        zoomStep: 0.1
                    });
                    picture.guillotine('fit');

                    // Display inital data
                    var data = picture.guillotine('getData');
                    for ( var key in data) {
                        $('#' + key).html(data[key]);
                    }

                    // Bind button actions
                    $('#fit').click(function() {
                        picture.guillotine('fit');
                    });
                    $('#zoom_in').click(function() {
                        picture.guillotine('zoomIn');
                    });
                    $('#zoom_out').click(function() {
                        picture.guillotine('zoomOut');
                    });

                    // Update data on change
                    picture.on('guillotinechange', function(ev, data, action) {
                        data.scale = parseFloat(data.scale.toFixed(4));

                        //if scale is bigger than 0.9 dispable zoom in button
                        if (data.scale > 0.9) {
                            $('#zoom_in').addClass('disabled');
                        } else {
                            $('#zoom_in').removeClass('disabled');
                        }
                        for ( var k in data) {
                            $('#' + k).html(data[k]);
                        }

                    });
                });

            } else {
                $("#errorMessage").text(json.file);
                $("#errorMessage").removeClass("hidden");
            }
        }
    });

    $('.cropbuttonscontainer').css({
        width : $('#max_w').val()
    });

});

[matiasgali]

Same as #5, it's not an issue of the plugin.