Problem with resize and "center" of magnification

Problem with resize and "center" of magnification


Hi. I attach a piece of html code that show the wrong behavior.
I have a resizable component and resizing it I cause the image below
it to be moved. The image has a magnifier attached.
After the resize, the "center" of magnification I mean, the point in
the page where the magnifications is maximum if the mouse is on it,
remains at the same place of the page, which is no more inside the
image that, as said, has been moved by resize.
Here is the code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        $(window).bind("load",function(){
            $('#example1').resizable();
            $("#example5").magnifier();
        });
</script>
<style>div { width: 150px; height: 100px; }</style>
</head>
<body>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/
flora/flora.all.css" type="text/css" media="screen" title="Flora
(Default)">
<script src="http://dev.jquery.com/view/trunk/plugins/dimensions/
jquery.dimensions.js"></script>
<script src="http://dev.jquery.com/view/trunk/plugins/ui/
ui.mouse.js"></script>
<script src="http://dev.jquery.com/view/trunk/plugins/ui/
ui.resizable.js"></script>
<script src="http://dev.jquery.com/view/trunk/plugins/ui/
ui.magnifier.js"></script>
<div id='example1' class="ui-wrapper example">
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px;
right: 20px;'>Resize me</div>
</div>
<div id='example5' class="playground" style="width: 600px; padding:
20px;">
    <img src="http://www.videomakers.net/imma/up/-Raptor-
_24_8_2004_PIPPO.JPG" width="200" align="left" />
<div>
</body>
</html>