root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/position/cycler.html @ 26899

Revision 26899, 2.8 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

Line 
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>
Note: See TracBrowser for help on using the browser.