integrate jquery ui slider with my existing script that zooms image

Question

i implemented this javascript that let's you zoom in and out an image into a fixed width div with overflow hidden. i initially implemented it with two simple buttons (increase/decrease) that, onclick, would increase or decrease the width of the contained image.

what i would like to do now is to substitute the buttons with the vertical jquery ui slider but i don't how to do it.

here's my starting point: http://jsfiddle.net/omegaiori/QWfHE/embedded/result/

basically the zoom in/out properties are obtained by this code:

    function zoomIn() {
    var imgElem = jQuery(".image");
    width = width*1.1;
    height = height*1.1;
    imgElem.css({"width": width + "px", "height": height + "px"});
    imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}

function zoomOut() {
    var imgElem = jQuery(".image");
    width = width/1.1;
    height = height/1.1;
    imgElem.css({"width": width + "px", "height": height + "px"});
    imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}

can anybody help?? that would be so cool :) thanks in advance

Answer 1

http://jsfiddle.net/bhilleli/QWfHE/1/ Your example was almost there. Just use this as your slide function:

slide: function( event, ui ) {
           var prevVal=$( "#amount" ).val();
           var newVal=ui.value;
            if (prevVal>newVal) {
               zoomOut();   
            } else {
               zoomIn();   
            }

   $( "#amount" ).val( ui.value );
}