1 files changed, 107 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/demos/position/cycler.html b/apps/it/static/js/ui/demos/position/cycler.html
new file mode 100644
index 0000000..e33e3be
--- /dev/null
+++ b/apps/it/static/js/ui/demos/position/cycler.html
@@ -0,0 +1,107 @@
+<!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.10.2.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>