Resize an image using jQuery UI Slider

Question

I'm using a jQuery UI slider to resize an image proportionnally, at first uploaded an image an then you pass to the resizeing part and it work great so far. The only issue here is as soon is I position the range slider the image get small the it original width!! Here's my code :

//resize
var orginalWidth = $("#image").width();

$("#infoSlider").text(orginalWidth + ', 100%');

$("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function (event, ui) {
        var fraction = (1 + ui.value / 100),
            newWidth = orginalWidth * fraction;

        $("#infoSlider").text('width :' + newWidth + ', Proportion :' + Math.floor(fraction * 100) + '%');

        $("#image").width(newWidth);
    }
});

// UPloded
$(function () {
            $(":file").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });

        function imageIsLoaded(e) {
            $("#slider").removeAttr("style")
            $('#image').attr('src', e.target.result);
        };

<div id="slider"></div>
<span id="infoSlider"></span>

<div class="target">
    <img id="image" src="#" alt="your image" />
    <input type='file' />
</div>   

How I can fix this please! Much appreciated
And here's a demo to to this issue : DEMO The issue :

Answer 1

You need to get the loaded image's size in the variable once it is loaded.

Add this:

orginalWidth = $("#image").width();

To your function:

function imageIsLoaded(e) {
    $("#slider").removeAttr("style")
    $('#image').attr('src', e.target.result);
    orginalWidth = $("#image").width(); // store the loaded image size
};

Check the values of fraction, width and proportion.

When you change your slider to reduce, this is how it looks:

When you change back your slider, notice that the image is back to its original size :

When you increase your slide, notice that the values increase and so does image :

---

Edit:

The problem appears when you use the slider before selecting an image and also when you select a new image. This is because, the width of the img tag itself is changed and no matter how large an image you select, it will fit itself in the new dimensions of the img tag.

Solution:

Use dynamically added img tags. Every time you select a new image, you remove the earlier img element and add a new img element. Assign the src of the new tag to the selected image. This way effectively the image is reset on every select.

Demo 2: http://jsfiddle.net/XQSLk/5/

function imageIsLoaded(e) {
    var $newImg = $("<img>");                        // create a new img element
    $("#slider").removeAttr("style")
    $("#slider").slider('value', 0);                 // reset the slider
    $("#image").remove();                            // remove the existing img element
    $newImg.attr("id", "image");                     // add id to the new element
    $newImg.attr('src', e.target.result);            // assign src to new element
    $("#tgt").append($newImg);                       // add new element to DOM inside target div
    originalWidth = $("#image").width();             // now get the new width
    $("#infoSlider").text(originalWidth + ', 100%'); // reset the slider text
};

Hope that helps.