--- 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>