Draggable area is not correct after image is zoom using Jquery

Question

I am using jquery.viewport to create an viewport function: I use jquery ui to create slider and a own written zoom function to zoom the image. Also, using this plugin to create viewport function.

http://borbit.github.com/jquery.viewport/

The problem is , after I zoom the image, the draggable area is only part of the content . That means I can not drag the content in some of its area. Is there anyway to fix the problem? Thanks

Html:

<div id="view">
    <img src="demo/Web081112_P002_text.png" id = "largeText"/>
    <img src="demo/Web081112_P002_image.jpg" id = "largeImg"/>
</div>
<div id='slider' style='display:block;position:fixed;z-index:105;height:25%;right: 2%;top:25%;'></div>

Javascript

<script>

    $(document).ready(function(){

        $("#view").css("height",$(window).height());
        $("#view").css("width",$(window).width());

        /*
        $("#box").css("height",$("#largeImg").height());
        $("#box").css("width",$("#largeImg").width());
        */

        //initiate the viewport
        var element = $('#view').viewport();
        var content = element.viewport('content');
        content.draggable({containment: 'parent'});
        content.scraggable({containment: 'parent'});

               $( "#slider" ).slider({
                orientation: "vertical",
                range: "min",
                min: 100,
                max: 200,
                value: 100,
                slide: function( event, ui ) {

                    $("#largeText").css("width",ui.value+"%");
                    $("

#largeImg").css("width",ui.value+"%");


                    $("#largeText").css("height",ui.value+"%");
                    $("#largeImg").css("height",ui.value+"%");


                    $("#largeText").css('top', ($("#view").height()/2-$("#largeText").height()/2) +'px');
                    $("#largeImg").css('top', ($("#view").height()/2-$("#largeImg").height()/2) +'px');

                    $('#largeText').css('left', ($("#view").width()/2 - $('#largeText').width()/2)+'px');
                    $('#largeImg').css('left', ($("#view").width()/2 - $('#largeImg').width()/2)+'px');

                    //element.viewport('update');
                    //Using this statement to update will occur error.

                 }
            });   


    });
    </script>

css:

<style>
    #view {
        height:600px;
        width:350px;
    }

    #largeImg {     
            position:absolute;
            display:block;
            width: 1250px;
            height: 1500px;
            z-index: 100;
    }

    #largeText {
            position:absolute;
            display:block;
            width: 1250px;
            height: 1500px;
            z-index: 101;
    }

    body {
        width : auto;
        height: auto;
        overflow:hidden;
    }
</style>

Answer 1

The following should provide you a solution based on your description of the problem. I simplified the problem slightly but this should still help point you in the right direction.

Also, if $('#view').viewport('update'); is not working please provide the browser and version you are using.

Solution example: http://jsfiddle.net/wA3eU/3/

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://github.com/borbit/jquery.viewport/raw/master/jquery.viewport.js"></script>
    <script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>

<table id="SliderData">
    <tr><td>Scale: </td><td> <div id="UIVal">0</div></td><tr>
    <tr><td>Width: </td><td> <div id="Width">0</div></td><tr>
    <tr><td>Height: </td><td> <div id="Height">0</div></td><tr>
</table>
<div id="view">
    <img src="http://farm8.static.flickr.com/7108/6947221908_3675a27fe9.jpg" id = "largeImg"/>
</div>
<div id='slider'></div>

CSS

#slider {
    display:block;
    position:fixed;
    z-index:105;
    height:25%;
    right:2%;
    top:25%; 
    margin:1em;
    background:#ccc;
}

#SliderData {
    float:left;
    display:block;
    position:fixed;
    z-index:105;
    padding: .5em;
    background: #ccc;
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

#view {
    height:250px;
    width:250px;
}

#largeImg {     
        position:absolute;
        display:block;
        width: 500px;
        height: 500px;
        z-index: 100;
}

body {
    width : auto;
    height: auto;
    overflow:hidden;
}​

JQuery

$("#view").css("height",$(window).height());
$("#view").css("width",$(window).width());

//initiate the viewport
var element = $('#view').viewport();
var content = element.viewport('content');
content.draggable({containment: 'parent'});
content.scraggable({containment: 'parent'});

var defaultHeight = $("#largeImg").height();
var defaultWidth = $("#largeImg").width();

 $( "#slider" ).slider({
    orientation: "vertical",
    range: "min",
    min: 100, // 1x 
    max: 300, // 3x
    value: 100,
    slide: function(event, ui) {

        scale = ui.value/100.;

        $("#largeImg").css('width',defaultHeight * scale);
        $("#largeImg").css('height',defaultWidth * scale);     

        element = $('#view').viewport('update');

        $("#UIVal").text(scale);
        $("#Width").text($("#largeImg").width());
        $("#Height").text($("#largeImg").height());
     }
});