|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="UTF-8" /> |
|
5 <title>jQuery UI Position - Default functionality</title> |
|
6 <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> |
|
7 <script type="text/javascript" src="../../jquery-1.4.2.js"></script> |
|
8 <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> |
|
9 <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> |
|
10 <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> |
|
11 <link type="text/css" href="../demos.css" rel="stylesheet" /> |
|
12 |
|
13 <style type="text/css"> |
|
14 html, body { |
|
15 margin: 0; |
|
16 padding: 0 |
|
17 } |
|
18 </style> |
|
19 |
|
20 <script type="text/javascript"> |
|
21 $(function() { |
|
22 |
|
23 $.fn.position2 = function(options) { |
|
24 return this.position($.extend({ |
|
25 of: window, |
|
26 using: function(to) { |
|
27 $(this).css({ |
|
28 top: to.top, |
|
29 left: to.left |
|
30 }) |
|
31 }, |
|
32 collision: "none" |
|
33 }, options)); |
|
34 } |
|
35 |
|
36 $.fn.left = function(using) { |
|
37 return this.position2({ |
|
38 my: "right middle", |
|
39 at: "left middle", |
|
40 offset: "25 0", |
|
41 using: using |
|
42 }); |
|
43 } |
|
44 $.fn.right = function(using) { |
|
45 return this.position2({ |
|
46 my: "left middle", |
|
47 at: "right middle", |
|
48 offset: "-25 0", |
|
49 using: using |
|
50 }); |
|
51 } |
|
52 $.fn.center = function(using) { |
|
53 return this.position2({ |
|
54 my: "center middle", |
|
55 at: "center middle", |
|
56 using: using |
|
57 }); |
|
58 }; |
|
59 |
|
60 $("img:eq(0)").left(); |
|
61 $("img:eq(1)").center(); |
|
62 $("img:eq(2)").right(); |
|
63 |
|
64 $("body").css({ |
|
65 overflow: "hidden" |
|
66 }) |
|
67 $(".demo").css({ |
|
68 position: "relative", |
|
69 }); |
|
70 $(".demo img").css({ |
|
71 position: "absolute", |
|
72 }); |
|
73 |
|
74 function animate(to) { |
|
75 $(this).animate(to); |
|
76 } |
|
77 function next() { |
|
78 $("img:eq(2)").center(animate); |
|
79 $("img:eq(1)").left(animate) |
|
80 $("img:eq(0)").right().appendTo(".demo"); |
|
81 } |
|
82 function previous() { |
|
83 $("img:eq(0)").center(animate); |
|
84 $("img:eq(1)").right(animate); |
|
85 $("img:eq(2)").left().prependTo(".demo"); |
|
86 } |
|
87 $("#previous").click(previous); |
|
88 $("#next").click(next); |
|
89 |
|
90 $(".demo img").click(function() { |
|
91 $(".demo img").index(this) == 0 ? previous() : next(); |
|
92 }); |
|
93 |
|
94 $(window).resize(function() { |
|
95 $("img:eq(0)").left(animate); |
|
96 $("img:eq(1)").center(animate); |
|
97 $("img:eq(2)").right(animate); |
|
98 }) |
|
99 }); |
|
100 </script> |
|
101 |
|
102 </head> |
|
103 <body> |
|
104 |
|
105 <div class="demo"> |
|
106 |
|
107 <img src="images/earth.jpg" /> |
|
108 <img src="images/flight.jpg" /> |
|
109 <img src="images/rocket.jpg" /> |
|
110 |
|
111 <a id="previous" href="#">Previous</a> |
|
112 <a id="next" href="#">Next</a> |
|
113 </div> |
|
114 |
|
115 <div class="demo-description"> |
|
116 |
|
117 <p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them. |
|
118 <br/>Use the links at the top to cycle, or click on the images on the left and right. |
|
119 <br/>Note how the images are repositioned when resizing the window. |
|
120 <br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p> |
|
121 |
|
122 </div><!-- End demo-description --> |
|
123 |
|
124 </body> |
|
125 </html> |