--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/static/css/jq-css/demos/position/cycler.html Sat Jun 12 00:33:37 2010 +0200
@@ -0,0 +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>