diff options
Diffstat (limited to 'demos/position/cycler.html')
| -rw-r--r-- | demos/position/cycler.html | 27 |
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> |