<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Position - Image Cycler</title> <link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../demos.css"> <style> body { margin: 0; } #container { overflow: hidden; position: relative; height: 400px; } img { position: absolute; } </style> <script src="../../external/requirejs/require.js"></script> <script src="../bootstrap.js"> function left( element, using ) { element.position({ my: "right middle", at: "left+25 middle", of: "#container", collision: "none", using: using }); } function right( element, using ) { element.position({ my: "left middle", at: "right-25 middle", of: "#container", collision: "none", using: using }); } function center( element, using ) { element.position({ my: "center middle", at: "center middle", of: "#container", using: using }); } left( $( "img:eq(0)" ) ); center( $( "img:eq(1)" ) ); right( $( "img:eq(2)" ) ); function animate( to ) { $( this ).stop( true, false ).animate( to ); } function next( event ) { event.preventDefault(); center( $( "img:eq(2)" ), animate ); left( $( "img:eq(1)" ), animate ); right( $( "img:eq(0)" ).appendTo( "#container" ) ); } function previous( event ) { event.preventDefault(); center( $( "img:eq(0)" ), animate ); right( $( "img:eq(1)" ), animate ); left( $( "img:eq(2)" ).prependTo( "#container" ) ); } $( "#previous" ).on( "click", previous ); $( "#next" ).on( "click", next ); $( "img" ).on( "click", function( event ) { $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); }); $( window ).on( "resize", function() { left( $( "img:eq(0)" ), animate ); center( $( "img:eq(1)" ), animate ); right( $( "img:eq(2)" ), animate ); }); </script> </head> <body> <div id="container"> <img src="images/earth.jpg" width="458" height="308" alt="earth"> <img src="images/flight.jpg" width="512" height="307" alt="flight"> <img src="images/rocket.jpg" width="300" height="353" alt="rocket"> <a id="previous" href="#">Previous</a> <a id="next" href="#">Next</a> </div> <div class="demo-description"> <p>A photoviewer prototype using Position to place images at the center, left and right and cycle them. <br>Use the links at the top to cycle, or click on the images on the left and right. <br>Note how the images are repositioned when resizing the window. </div> </body> </html>