Question

zoom: function ( element, scale ){.....},
init: function() {
    $("#book div img").live('dblclick', function() {
       ...
       $( "#slider" ).slider({
       ...
          slide: function( event, ui ) {
             //call function here
             zoom (element,ui.value);
          }
       });
    });
},

There are two function, zoom and the main function. The main function call zoom function to perform work, how ever, since it is not at the same level, the browser return the error of undefined function ‘zoom’ . How to fix this (Able to call zoom inside the slide:function)?

Answer 1

Store a reference to the this object in the outermost scope of your functions. Then call this.zoom() inside your callback:

zoom: function ( element, scale ){.....},
init: function() {
    // store a reference to the object these functions are being added to
    var that = this; 

    $("#book div img").live('dblclick', function() {
       ...
       $( "#slider" ).slider({
       ...
          slide: function( event, ui ) {
             // use the var you made above to call zoom
             that.zoom (element,ui.value);
          }
       });
    });
},

simplified example: http://jsfiddle.net/u5ZL3/