CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user3350731
user3350731

Reputation: 972

Resize an image using jQuery UI Slider

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 : enter image description here enter image description here

Upvotes: 1

Views: 1732

Answers (1)

Abhitalks
Abhitalks

Reputation: 28437

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:

enter image description here

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

enter image description here

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

enter image description here

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.

Upvotes: 1

Related Questions