5 <title>jQuery UI Position - Image Cycler</title>
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7 <script src="../../jquery-1.9.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">
28 // TODO refactor into a widget and get rid of these plugin methods
29 $.fn.left = function( using ) {
30 return this.position({
38 $.fn.right = function( using ) {
39 return this.position({
41 at: "right-25 middle",
47 $.fn.center = function( using ) {
48 return this.position({
56 $( "img:eq(0)" ).left();
57 $( "img:eq(1)" ).center();
58 $( "img:eq(2)" ).right();
60 function animate( to ) {
61 $( this ).stop( true, false ).animate( to );
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" );
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" );
75 $( "#previous" ).click( previous );
76 $( "#next" ).click( next );
78 $( "img" ).click(function( event ) {
79 $( "img" ).index( this ) === 0 ? previous( event ) : next( event );
82 $( window ).resize(function() {
83 $( "img:eq(0)" ).left( animate );
84 $( "img:eq(1)" ).center( animate );
85 $( "img:eq(2)" ).right( animate );
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">
97 <a id="previous" href="#">Previous</a>
98 <a id="next" href="#">Next</a>
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.