Mercurial > hg > ismi-richfaces
comparison src/main/webapp/imageServer/resources/js/jquery-ui-1.10.4/demos/position/cycler.html @ 7:764f47286679
(none)
author | jurzua |
---|---|
date | Wed, 29 Oct 2014 14:28:34 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
6:ded3bccf2cf9 | 7:764f47286679 |
---|---|
1 <!doctype html> | |
2 <html lang="en"> | |
3 <head> | |
4 <meta charset="utf-8"> | |
5 <title>jQuery UI Position - Image Cycler</title> | |
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> | |
7 <script src="../../jquery-1.10.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 body { | |
14 margin: 0; | |
15 } | |
16 #container { | |
17 overflow: hidden; | |
18 position: relative; | |
19 height: 400px; | |
20 } | |
21 | |
22 img { | |
23 position: absolute; | |
24 } | |
25 </style> | |
26 <script> | |
27 $(function() { | |
28 // TODO refactor into a widget and get rid of these plugin methods | |
29 $.fn.left = function( using ) { | |
30 return this.position({ | |
31 my: "right middle", | |
32 at: "left+25 middle", | |
33 of: "#container", | |
34 collision: "none", | |
35 using: using | |
36 }); | |
37 }; | |
38 $.fn.right = function( using ) { | |
39 return this.position({ | |
40 my: "left middle", | |
41 at: "right-25 middle", | |
42 of: "#container", | |
43 collision: "none", | |
44 using: using | |
45 }); | |
46 }; | |
47 $.fn.center = function( using ) { | |
48 return this.position({ | |
49 my: "center middle", | |
50 at: "center middle", | |
51 of: "#container", | |
52 using: using | |
53 }); | |
54 }; | |
55 | |
56 $( "img:eq(0)" ).left(); | |
57 $( "img:eq(1)" ).center(); | |
58 $( "img:eq(2)" ).right(); | |
59 | |
60 function animate( to ) { | |
61 $( this ).stop( true, false ).animate( to ); | |
62 } | |
63 function next( event ) { | |
64 event.preventDefault(); | |
65 $( "img:eq(2)" ).center( animate ); | |
66 $( "img:eq(1)" ).left( animate ); | |
67 $( "img:eq(0)" ).right().appendTo( "#container" ); | |
68 } | |
69 function previous( event ) { | |
70 event.preventDefault(); | |
71 $( "img:eq(0)" ).center( animate ); | |
72 $( "img:eq(1)" ).right( animate ); | |
73 $( "img:eq(2)" ).left().prependTo( "#container" ); | |
74 } | |
75 $( "#previous" ).click( previous ); | |
76 $( "#next" ).click( next ); | |
77 | |
78 $( "img" ).click(function( event ) { | |
79 $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); | |
80 }); | |
81 | |
82 $( window ).resize(function() { | |
83 $( "img:eq(0)" ).left( animate ); | |
84 $( "img:eq(1)" ).center( animate ); | |
85 $( "img:eq(2)" ).right( animate ); | |
86 }); | |
87 }); | |
88 </script> | |
89 </head> | |
90 <body> | |
91 | |
92 <div id="container"> | |
93 <img src="images/earth.jpg" width="458" height="308" alt="earth"> | |
94 <img src="images/flight.jpg" width="512" height="307" alt="flight"> | |
95 <img src="images/rocket.jpg" width="300" height="353" alt="rocket"> | |
96 | |
97 <a id="previous" href="#">Previous</a> | |
98 <a id="next" href="#">Next</a> | |
99 </div> | |
100 | |
101 <div class="demo-description"> | |
102 <p>A photoviewer prototype using Position to place images at the center, left and right and cycle them. | |
103 <br>Use the links at the top to cycle, or click on the images on the left and right. | |
104 <br>Note how the images are repositioned when resizing the window. | |
105 </div> | |
106 </body> | |
107 </html> |