lente

<html>
    <head>
        <meta charset="utf-8">
        <title>lente</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
        <script src="http://davetayls.me/bower_components/jquery.kinetic/jquery.kinetic.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#contenedor').kinetic();
            //$("#imagen").draggable()
            $("#sniper").draggable();
            $("#sniper").offset({left:0,top:0});
            $("#slider").slider({
              orientation: "horizontal",
              min: 50,
              max: 350,
              value: 50,
              slide: cambioSlider,
              change: cambioSlider
            });
            $("#imagen").width($("#contenedor").width());
        });
        function cambioSlider(){
            var milimetros = $("#slider").slider("value");
            $("#mm").val(milimetros+"mm");
            var alfa = milimetros/50;
            var normal = $("#contenedor").width();
            var resultado = normal * alfa;
            $("#imagen").width(resultado);
        }
        function cargarImagen(){
            $("#imagen").attr("src",$("#cargar").val())
            $("#slider").slider("value",50);
            $("#imagen").offset({left:9, top:9});
            cambioSlider();
        };
        </script>
    </head>
    <body style="width: 100%; height: 90%; margin 0; overflow:hidden">
        <div id="contenedor" style="width:90%; height: 600px; margin 50px; overflow:hidden" class="ui-widget-content">
            <img id="imagen" src="http://followmetoaustralia.files.wordpress.com/2012/05/2-km-long-jetty.jpg" >
        </div>
        <br><br>
            <div id="slider" style="margin: 15px; width:600px;"></div>
            <input type="text" id="mm" value="50mm" />
            <input type="text" id="cargar" value="http://followmetoaustralia.files.wordpress.com/2012/05/2-km-long-jetty.jpg" /><input type="button" id="boton" value="cargar imagen" onclick="cargarImagen();"/>
    <img id="sniper" style="position:absolute" src="http://1.bp.blogspot.com/-GIYmvWWqf0s/TyrLxj4KfjI/AAAAAAAAAW8/a-LviFsG1Us/s1600/SniperReticle.png" />
    </body>
</html>