Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 85 lines (81 sloc) 3.457 kb
370107a @tlhunter Initial Commit
authored
1 <!DOCTYPE html>
2 <html>
3 <head>
57c1099 @tlhunter Fixing jQuery UI CDN locations
authored
4 <link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.7.1/themes/base/ui.all.css" rel="stylesheet" />
5 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
6 <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.7.1/ui/ui.core.js"></script>
7 <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.7.1/ui/ui.slider.js"></script>
370107a @tlhunter Initial Commit
authored
8 <style type="text/css">
9 #sq_pos { margin: 10px; width: 500px;}
10 #sq_scale { margin: 10px; height: 40px;}
11 .sq_slider { font-size: 62.5%; }
12 </style>
13 <script type="text/javascript">
14 var base_width = 604;
15 var base_height = 404;
16 var sq_width=new Array();
17 var sq_height=new Array();
18 var sq_img_url=new Array();
19 var current_squirrel = 2;
20 sq_width[1] = 54;
21 sq_height[1] = 100;
22 sq_img_url[1] = 'data/squirrel_small.png';
23 sq_width[2] = 81;
24 sq_height[2] = 150;
25 sq_img_url[2] = 'data/squirrel_medium.png';
26 sq_width[3] = 117;
27 sq_height[3] = 216;
28 sq_img_url[3] = 'data/squirrel_large.png';
29 $(document).ready(function(){
30 // HORIZONTAL
31 $("#sq_pos").slider({min: 0, max: base_width, value: base_width/2, change: function() {
32 var x_value = Math.floor($('#sq_pos').slider('option', 'value') - (sq_width[current_squirrel] / 2));
33 document.sq_data.sq_pos_x.value = x_value;
34 $("#squirrel_image").css("left", x_value);
35 }});
36 // VERTICAL
37 $("#sq_scale").slider({orientation: 'vertical', min: 1, max: 3, value: 2, change: function() {
38 current_squirrel = $('#sq_scale').slider('option', 'value');
39 var y_value = base_height - sq_height[current_squirrel];
40 document.sq_data.sq_image.value = current_squirrel;
41 document.sq_data.sq_pos_y.value = y_value;
42 $("#squirrel_image").attr('src', sq_img_url[current_squirrel]);
43 $("#squirrel_image").css("top", y_value);
44 // RESIZING SQUIRREL IMAGE MEANS WE HAVE TO RECALC X VALUES
45 var x_value = Math.floor($('#sq_pos').slider('option', 'value') - (sq_width[current_squirrel] / 2));
46 document.sq_data.sq_pos_x.value = x_value;
47 $("#squirrel_image").css("left", x_value);
48 }});
49 });
50 </script>
51 </head>
52 <body>
53 <div style="width: 604px; height: 404px; overflow: hidden; position: relative; margin: 0 auto;">
54 <img src="tom.jpg" width="604" height="404" />
55 <img src="data/squirrel_medium.png" id="squirrel_image" style="position: absolute; z-index: 100; top: 254px; left: 262px;" />
56 </div>
57
58 <table align="center" width="560">
59 <tr><td>
60 <div id="sq_pos" class='sq_slider'></div>
61 </td><td>
62 <div id="sq_scale" class='sq_slider'></div>
63 </td></tr>
64 <tr><td colspan="2">
65 <table width="550" align="center">
66 <tr>
67 <td align="center" width="33%"><input type="radio" value="upload" checked /> Save on Facebook</td>
68 <td align="center" width="33%"><input type="radio" value="download" /> Download Photo</td>
69 <td align="center" width="33%"><input type="submit" value="Squirrelify Photo" /></td>
70 </tr>
71 </table>
72 </td></tr>
73 </table>
74 <form name="sq_data" method="post" action="">
75 <input name="sq_pos_x" id="sq_pos_x" value="262" size="3" /> <!-- WIDTH / 2 - SQ_WIDTH / 2 -->
76 <input name="sq_pos_y" id="sq_pos_y" value="254" size="3" />
77 <input name="sq_image" value="2" size="3" />
78 <input name="src_img_x" value="604" size="3" />
79 <input name="src_img_y" value="404" size="3" />
80
81
82 </form>
83 </body>
84 </html>
Something went wrong with that request. Please try again.