Subversion Repositories SmartDukaan

Rev

Rev 11238 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
11238 kshitij.so 1 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
<html>
3 
<head>
4 
<link href="/css/imgareaselect-default.css" type="text/css" rel="stylesheet">
11240 kshitij.so 5 
<script type="text/javascript" src="/js/jquery.js"></script>
11238 kshitij.so 6 
<script src="/js/jquery.imgareaselect.pack.js" type="text/javascript"></script>
7 
<script type="text/javascript">
8 
function preview(img, selection) {
9 
    if (!selection.width || !selection.height)
10 
        return;
11 
 
12 
    var scaleX = 100 / selection.width;
13 
    var scaleY = 100 / selection.height;
14 
 
15 
    $('#preview img').css({
16 
        width: Math.round(scaleX * 300),
17 
        height: Math.round(scaleY * 300),
18 
        marginLeft: -Math.round(scaleX * selection.x1),
19 
        marginTop: -Math.round(scaleY * selection.y1)
20 
    });
21 
 
22 
    $('#x1').val((Math.round(selection.x1)));
23 
    $('#y1').val((Math.round(selection.y1)));
24 
    $('#x2').val((Math.round(selection.x2)));
25 
    $('#y2').val((Math.round(selection.y2)));
26 
}
27 
 
28 
$(function () {
29 
    $('#photo').imgAreaSelect({ handles: true,
30 
        fadeSpeed: 200, onSelectChange: preview });
31 
});
32 
</script>
33 
</head>
34 
<body>
35 
<div id="image" style="padding-bottom: 10px">
11240 kshitij.so 36 
	<img src='/images/campaignImages/$action.getLink()' id="photo" style="float: left; border: 1px solid gray;">
11238 kshitij.so 37 
		<div style="float: left; width: 18%; margin-bottom: 10px; margin-left: 10px;">
38 
    <table style="">
39 
      <thead>
40 
        <tr>
41 
          <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
42 
            Coordinates
43 
          </th>
44 
        </tr>
45 
      </thead>
46 
      <tbody>
47 
        <tr>
48 
          <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
49 
 		      <td style="width: 30%;"><input type="text" id="x1" value="-"></td>
50 
        </tr>
51 
        <tr>
52 
          <td><b>Y<sub>1</sub>:</b></td>
53 
          <td><input type="text" id="y1" value="-"></td>
54 
        </tr>
55 
        <tr>
56 
          <td><b>X<sub>2</sub>:</b></td>
57 
          <td><input type="text" id="x2" value="-"></td>
58 
          <td></td>
59 
          <td></td>
60 
        </tr>
61 
        <tr>
62 
          <td><b>Y<sub>2</sub>:</b></td>
63 
          <td><input type="text" id="y2" value="-"></td>
64 
          <td></td>
65 
          <td></td>
66 
        </tr>
67 
      </tbody>
68 
    </table>
69 
  </div>
70 
	</div>
71 
</body>
72 
</html>