Mercurial > hg > ismi-richfaces

comparison src/main/webapp/imageServer/resources/js/jquery-ui-1.10.4/demos/position/cycler.html @ 7:764f47286679

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
(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>