r2868 - positionTo: added cycler demo (prototype for photoviewer), still needs some refactoring
Author: joern.zaefferer
Date: Sun Jul 5 10:44:26 2009
New Revision: 2868
Added:
branches/dev/positionTo/demos/positionTo/cycler.html (contents, props
changed)
branches/dev/positionTo/demos/positionTo/images/
branches/dev/positionTo/demos/positionTo/images/earth.jpg (contents,
props changed)
branches/dev/positionTo/demos/positionTo/images/flight.jpg (contents,
props changed)
branches/dev/positionTo/demos/positionTo/images/rocket.jpg (contents,
props changed)
Modified:
branches/dev/positionTo/demos/positionTo/index.html
Log:
positionTo: added cycler demo (prototype for photoviewer), still needs some
refactoring
Added: branches/dev/positionTo/demos/positionTo/cycler.html
==============================================================================
--- (empty file)
+++ branches/dev/positionTo/demos/positionTo/cycler.html Sun Jul 5
10:44:26 2009
@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI PositionTo - 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.positionTo.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.positionTo2 = function(options) {
+ return this.positionTo($.extend({
+ of: window,
+ by: function(to) {
+ $(this).css({
+ top: to.top,
+ left: to.left
+ })
+ }
+ }, options));
+ }
+
+ $.fn.left = function(by) {
+ return this.positionTo2({
+ my: "right middle",
+ at: "left middle",
+ offset: "25 0",
+ by: by
+ });
+ }
+ $.fn.right = function(by) {
+ return this.positionTo2({
+ my: "left middle",
+ at: "right middle",
+ offset: "-25 0",
+ by: by
+ });
+ }
+ $.fn.center = function(by) {
+ return this.positionTo2({
+ 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);
+ }
+ $("#previous").click(function() {
+ $("img:eq(0)").center(animate);
+ $("img:eq(1)").right(animate);
+ $("img:eq(2)").left().prependTo(".demo");
+ });
+ $("#next").click(function() {
+ $("img:eq(2)").center(animate);
+ $("img:eq(1)").left(animate)
+ $("img:eq(0)").right().appendTo(".demo");
+ });
+
+ $(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">
+
+...
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Added: branches/dev/positionTo/demos/positionTo/images/earth.jpg
==============================================================================
Binary file. No diff available.
Added: branches/dev/positionTo/demos/positionTo/images/flight.jpg
==============================================================================
Binary file. No diff available.
Added: branches/dev/positionTo/demos/positionTo/images/rocket.jpg
==============================================================================
Binary file. No diff available.
Modified: branches/dev/positionTo/demos/positionTo/index.html
==============================================================================
--- branches/dev/positionTo/demos/positionTo/index.html (original)
+++ branches/dev/positionTo/demos/positionTo/index.html Sun Jul 5 10:44:26
2009
@@ -10,6 +10,7 @@
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
+ <li><a href="cycler.html">Cycling images</a></li>
</ul>
</div>