--- a/client/player/css/jq-css/demos/position/cycler.html Tue Jun 15 01:33:03 2010 +0200
+++ b/client/player/css/jq-css/demos/position/cycler.html Mon Jul 12 12:01:22 2010 +0200
@@ -1,125 +1,125 @@
-<!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>
+<!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>