|
17 | 17 | </style> |
18 | 18 | <script> |
19 | 19 | $(function() { |
| 20 | + // TODO refactor into a widget and get rid of these plugin methods |
20 | 21 | $.fn.position2 = function( options ) { |
21 | 22 | return this.position( $.extend({ |
22 | 23 | of: window, |
|
52 | 53 | }); |
53 | 54 | }; |
54 | 55 |
|
55 | | - $( "img:eq(0)" ).left(); |
56 | | - $( "img:eq(1)" ).center(); |
57 | | - $( "img:eq(2)" ).right(); |
58 | | - |
59 | 56 | $( "body" ).css({ |
60 | 57 | overflow: "hidden" |
61 | 58 | }) |
|
66 | 63 | position: "absolute", |
67 | 64 | }); |
68 | 65 |
|
| 66 | + $( "img:eq(0)" ).left(); |
| 67 | + $( "img:eq(1)" ).center(); |
| 68 | + $( "img:eq(2)" ).right(); |
| 69 | + |
69 | 70 | function animate( to ) { |
70 | | - $(this).animate( to ); |
| 71 | + $(this).stop( true, false ).animate( to ); |
71 | 72 | } |
72 | | - function next() { |
| 73 | + function next( event ) { |
| 74 | + event.preventDefault(); |
73 | 75 | $( "img:eq(2)" ).center( animate ); |
74 | 76 | $( "img:eq(1)" ).left( animate ) |
75 | 77 | $( "img:eq(0)" ).right().appendTo( ".demo" ); |
76 | 78 | } |
77 | | - function previous() { |
| 79 | + function previous( event ) { |
| 80 | + event.preventDefault(); |
78 | 81 | $( "img:eq(0)" ).center( animate ); |
79 | 82 | $( "img:eq(1)" ).right( animate ); |
80 | 83 | $( "img:eq(2)" ).left().prependTo( ".demo" ); |
81 | 84 | } |
82 | 85 | $( "#previous" ).click( previous ); |
83 | 86 | $( "#next" ).click( next ); |
84 | 87 |
|
85 | | - $( ".demo img" ).click(function() { |
86 | | - $( ".demo img" ).index( this ) === 0 ? previous() : next(); |
| 88 | + $( ".demo img" ).click(function( event ) { |
| 89 | + $( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event ); |
87 | 90 | }); |
88 | 91 |
|
89 | 92 | $( window ).resize(function() { |
|
98 | 101 |
|
99 | 102 | <div class="demo"> |
100 | 103 |
|
101 | | -<img src="images/earth.jpg" /> |
102 | | -<img src="images/flight.jpg" /> |
103 | | -<img src="images/rocket.jpg" /> |
| 104 | +<img src="images/earth.jpg" width="458" height="308" /> |
| 105 | +<img src="images/flight.jpg" width="512" height="307" /> |
| 106 | +<img src="images/rocket.jpg" width="300" height="353" /> |
104 | 107 |
|
105 | 108 | <a id="previous" href="#">Previous</a> |
106 | 109 | <a id="next" href="#">Next</a> |
|
0 commit comments