jQuery UI slider to resize image

Question

I would like to make a jQuery UI slider wich resize my image size. However the image size is never the same so I would like to resize with percentage respecting the ratio. Here is what I've done so far : http://jsfiddle.net/Au3kk/

I tried this but it doesn't work on the event :

 width :  ($(this).css('width')) + (ui.value + "%");

I'm new with Javascript I hope you won't be to hard with me. Thanks a lot.

Answer 1

How about storing off the original width:

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

And then using:

$("#image").width(orginalWidth * (1 + ui.value/100));

jsfiddle

Answer 2

You need to modify this line, from

---

$("#image").css({ width : ($(this).css('width')) + (ui.value + "%"); });

---

to

 $('#image').css('width',ui.value+'%');

---

if you remove the last part of the command ( +'%' ) the image will resize in pixels. Please note that the value of a percentage increase must be greater than 0(where 0 means invisible) however it can go above 100%. In your example you have set minimum to -50 and maximum to 50.

Also with the command $(this).css , you tried to read the css of the element where events are triggered (slider in this instance) instead of the actual image css