Position: Fix initial positioning of cycler demo.

1 files changed, 15 insertions, 12 deletions

diff --git a/demos/position/cycler.html b/demos/position/cycler.html
index 689a1191f..2fb36167f 100644
--- a/demos/position/cycler.html
+++ b/demos/position/cycler.html
@@ -17,6 +17,7 @@
     </style>
 	<script>
 	$(function() {
+		// TODO refactor into a widget and get rid of these plugin methods
 		$.fn.position2 = function( options ) {
 			return this.position( $.extend({
 				of: window,
@@ -52,10 +53,6 @@
 			});
 		};
 
-		$( "img:eq(0)" ).left();
-		$( "img:eq(1)" ).center();
-		$( "img:eq(2)" ).right();
-
 		$( "body" ).css({
 			overflow: "hidden"
 		})
@@ -66,15 +63,21 @@
 			position: "absolute",
 		});
 
+		$( "img:eq(0)" ).left();
+		$( "img:eq(1)" ).center();
+		$( "img:eq(2)" ).right();
+
 		function animate( to ) {
-			$(this).animate( to );
+			$(this).stop( true, false ).animate( to );
 		}
-		function next() {
+		function next( event ) {
+			event.preventDefault();
 			$( "img:eq(2)" ).center( animate );
 			$( "img:eq(1)" ).left( animate )
 			$( "img:eq(0)" ).right().appendTo( ".demo" );
 		}
-		function previous() {
+		function previous( event ) {
+			event.preventDefault();
 			$( "img:eq(0)" ).center( animate );
 			$( "img:eq(1)" ).right( animate );
 			$( "img:eq(2)" ).left().prependTo( ".demo" );
@@ -82,8 +85,8 @@
 		$( "#previous" ).click( previous );
 		$( "#next" ).click( next );
 
-		$( ".demo img" ).click(function() {
-			$( ".demo img" ).index( this ) === 0 ? previous() : next();
+		$( ".demo img" ).click(function( event ) {
+			$( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event );
 		});
 
 		$( window ).resize(function() {
@@ -98,9 +101,9 @@
 
 <div class="demo">
 
-<img src="images/earth.jpg" />
-<img src="images/flight.jpg" />
-<img src="images/rocket.jpg" />
+<img src="images/earth.jpg" width="458" height="308" />
+<img src="images/flight.jpg" width="512" height="307" />
+<img src="images/rocket.jpg" width="300" height="353" />
 
 <a id="previous" href="#">Previous</a>
 <a id="next" href="#">Next</a>