Mercurial > hg > MPIWGThesaurus

comparison jquery-ui/development-bundle/demos/position/cycler.html @ 0:b2e4605f20b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b2e4605f20b2
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.5.1.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>