--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Position - Image Cycler</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ body {
+ margin: 0;
+ }
+ #container {
+ overflow: hidden;
+ position: relative;
+ height: 400px;
+ }
+
+ img {
+ position: absolute;
+ }
+ </style>
+ <script>
+ $(function() {
+ // TODO refactor into a widget and get rid of these plugin methods
+ $.fn.left = function( using ) {
+ return this.position({
+ my: "right middle",
+ at: "left+25 middle",
+ of: "#container",
+ collision: "none",
+ using: using
+ });
+ };
+ $.fn.right = function( using ) {
+ return this.position({
+ my: "left middle",
+ at: "right-25 middle",
+ of: "#container",
+ collision: "none",
+ using: using
+ });
+ };
+ $.fn.center = function( using ) {
+ return this.position({
+ my: "center middle",
+ at: "center middle",
+ of: "#container",
+ using: using
+ });
+ };
+
+ $( "img:eq(0)" ).left();
+ $( "img:eq(1)" ).center();
+ $( "img:eq(2)" ).right();
+
+ function animate( to ) {
+ $( this ).stop( true, false ).animate( to );
+ }
+ function next( event ) {
+ event.preventDefault();
+ $( "img:eq(2)" ).center( animate );
+ $( "img:eq(1)" ).left( animate )
+ $( "img:eq(0)" ).right().appendTo( "#container" );
+ }
+ function previous( event ) {
+ event.preventDefault();
+ $( "img:eq(0)" ).center( animate );
+ $( "img:eq(1)" ).right( animate );
+ $( "img:eq(2)" ).left().prependTo( "#container" );
+ }
+ $( "#previous" ).click( previous );
+ $( "#next" ).click( next );
+
+ $( "img" ).click(function( event ) {
+ $( "img" ).index( this ) === 0 ? previous( event ) : next( event );
+ });
+
+ $( window ).resize(function() {
+ $( "img:eq(0)" ).left( animate );
+ $( "img:eq(1)" ).center( animate );
+ $( "img:eq(2)" ).right( 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>
git://git.onelab.eu / unfold.git / blobdiff