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