diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2009-07-24 18:24:13 +0000 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2009-07-24 18:24:13 +0000 |
| commit | eff793d014dfaeb4e601dbd97cf7b33352b05ce5 (patch) | |
| tree | 9b3bed79e91895f21b2ccab876a973850544b541 /demos/position/cycler.html | |
| parent | bfca009321a9be73c7b4fa042f0cfe5fd39ca8a4 (diff) | |
| download | jquery-ui-eff793d014dfaeb4e601dbd97cf7b33352b05ce5.tar.gz jquery-ui-eff793d014dfaeb4e601dbd97cf7b33352b05ce5.zip | |
Copied position plugin from /branches/dev/positionTo r2971.
Diffstat (limited to 'demos/position/cycler.html')
| -rw-r--r-- | demos/position/cycler.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/demos/position/cycler.html b/demos/position/cycler.html new file mode 100644 index 000000000..9bf90d9cc --- /dev/null +++ b/demos/position/cycler.html @@ -0,0 +1,124 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Position - Default functionality</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.3.2.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/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, + by: function(to) { + $(this).css({ + top: to.top, + left: to.left + }) + }, + collision: "none" + }, options)); + } + + $.fn.left = function(by) { + return this.position2({ + my: "right middle", + at: "left middle", + offset: "25 0", + by: by + }); + } + $.fn.right = function(by) { + return this.position2({ + my: "left middle", + at: "right middle", + offset: "-25 0", + by: by + }); + } + $.fn.center = function(by) { + return this.position2({ + my: "center middle", + at: "center middle", + by: by + }); + }; + + $("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> |