client/player/development-bundle/demos/position/cycler.html
changeset 57 3a3c15c462f8
parent 48 44d58d2e90b5
parent 56 da0957782d03
child 58 ec1d0e7dcb53
--- a/client/player/development-bundle/demos/position/cycler.html	Tue Jun 15 01:33:03 2010 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8" />
-	<title>jQuery UI Position - Default functionality</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-    
-    <style type="text/css">
-   	html, body {
-   		margin: 0;
-		padding: 0
-   	}
-    </style>
-    
-	<script type="text/javascript">
-	$(function() {
-		
-		$.fn.position2 = function(options) {
-			return this.position($.extend({
-				of: window,
-				using: function(to) {
-					$(this).css({
-						top: to.top,
-						left: to.left
-					})
-				},
-				collision: "none"
-			}, options));
-		}
-		
-		$.fn.left = function(using) {
-			return this.position2({
-				my: "right middle",
-				at: "left middle",
-				offset: "25 0",
-				using: using
-			});
-		}
-		$.fn.right = function(using) {
-			return this.position2({
-				my: "left middle",
-				at: "right middle",
-				offset: "-25 0",
-				using: using
-			});
-		}
-		$.fn.center = function(using) {
-			return this.position2({
-				my: "center middle",
-				at: "center middle",
-				using: using
-			});
-		};
-		
-		$("img:eq(0)").left();
-		$("img:eq(1)").center();
-		$("img:eq(2)").right();
-		
-		$("body").css({
-			overflow: "hidden"
-		})
-		$(".demo").css({
-			position: "relative",
-		});
-		$(".demo img").css({
-			position: "absolute",
-		});
-		
-		function animate(to) {
-			$(this).animate(to);
-		}
-		function next() {
-			$("img:eq(2)").center(animate);
-			$("img:eq(1)").left(animate)
-			$("img:eq(0)").right().appendTo(".demo");
-		}
-		function previous() {
-			$("img:eq(0)").center(animate);
-			$("img:eq(1)").right(animate);
-			$("img:eq(2)").left().prependTo(".demo");
-		}
-		$("#previous").click(previous);
-		$("#next").click(next);
-		
-		$(".demo img").click(function() {
-			$(".demo img").index(this) == 0 ? previous() : next();
-		});
-		
-		$(window).resize(function() {
-			$("img:eq(0)").left(animate);
-			$("img:eq(1)").center(animate);
-			$("img:eq(2)").right(animate);
-		})
-	});
-	</script>
-    
-</head>
-<body>
-
-<div class="demo">
-
-	<img src="images/earth.jpg" />
-	<img src="images/flight.jpg" />
-	<img src="images/rocket.jpg" />
-
-	<a id="previous" href="#">Previous</a>
-	<a id="next" href="#">Next</a>
-</div>
-
-<div class="demo-description">
-
-<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.
-<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.
-<br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p>
-
-</div><!-- End demo-description -->
-
-</body>
-</html>