Subversion Repositories SmartDukaan

Rev

Rev 11240 | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="/css/imgareaselect-default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery.js"></script>
<script src="/js/jquery.imgareaselect.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });
        
        $('#coor').val((Math.round(selection.x1))+','+(Math.round(selection.y1))+','+(Math.round(selection.x2))+','+(Math.round(selection.y2)));

}

$(function () {
    $('#photo').imgAreaSelect({ handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});
</script>
</head>
<body>
<div id="image" style="padding-bottom: 10px">
        <img src='/images/campaignImages/$action.getLink()' id="photo" style="border: 1px solid gray;">
</div>
<div style="margin-top: 20px;" class="coordinates">
<label style="margin-right: 10px;">Coordiates</label>
<input type="text" readonly="" id="coor">
</div>
</body>
</html>