r2869 - positionTo: description text and other stuff for the cycler demo: click on left/right ima...
Author: joern.zaefferer
Date: Sun Jul 5 10:51:43 2009
New Revision: 2869
Modified:
branches/dev/positionTo/demos/positionTo/cycler.html
Log:
positionTo: description text and other stuff for the cycler demo: click on
left/right images to cycle
Modified: branches/dev/positionTo/demos/positionTo/cycler.html
==============================================================================
--- branches/dev/positionTo/demos/positionTo/cycler.html (original)
+++ branches/dev/positionTo/demos/positionTo/cycler.html Sun Jul 5
10:51:43 2009
@@ -72,15 +72,21 @@
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() {
+ 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() {
@@ -106,7 +112,10 @@
<div class="demo-description">
-...
+A prototype for the <a
href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using
PositionTo 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!
</div><!-- End demo-description -->