diff options
Diffstat (limited to 'demos/position/cycler.html')
| -rw-r--r-- | demos/position/cycler.html | 62 |
1 files changed, 29 insertions, 33 deletions
diff --git a/demos/position/cycler.html b/demos/position/cycler.html index 16542b962..241dae9a0 100644 --- a/demos/position/cycler.html +++ b/demos/position/cycler.html @@ -9,6 +9,17 @@ <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <link rel="stylesheet" href="../demos.css"> + <style> + #container { + overflow: hidden; + position: relative; + height: 400px; + } + + img { + position: absolute; + } + </style> <script> $(function() { // TODO refactor into a widget and get rid of these plugin methods @@ -16,7 +27,7 @@ return this.position({ my: "right middle", at: "left+25 middle", - of: window, + of: "#container", collision: "none", using: using }); @@ -25,7 +36,7 @@ return this.position({ my: "left middle", at: "right-25 middle", - of: window, + of: "#container", collision: "none", using: using }); @@ -34,21 +45,11 @@ return this.position({ my: "center middle", at: "center middle", - of: window, + of: "#container", using: using }); }; - $( "body" ).css({ - overflow: "hidden" - }) - $( ".demo" ).css({ - position: "relative", - }); - $( ".demo img" ).css({ - position: "absolute", - }); - $( "img:eq(0)" ).left(); $( "img:eq(1)" ).center(); $( "img:eq(2)" ).right(); @@ -60,19 +61,19 @@ event.preventDefault(); $( "img:eq(2)" ).center( animate ); $( "img:eq(1)" ).left( animate ) - $( "img:eq(0)" ).right().appendTo( ".demo" ); + $( "img:eq(0)" ).right().appendTo( "#container" ); } function previous( event ) { event.preventDefault(); $( "img:eq(0)" ).center( animate ); $( "img:eq(1)" ).right( animate ); - $( "img:eq(2)" ).left().prependTo( ".demo" ); + $( "img:eq(2)" ).left().prependTo( "#container" ); } $( "#previous" ).click( previous ); $( "#next" ).click( next ); - $( ".demo img" ).click(function( event ) { - $( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event ); + $( "img" ).click(function( event ) { + $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); }); $( window ).resize(function() { @@ -85,25 +86,20 @@ </head> <body> -<div class="demo"> - -<img src="images/earth.jpg" width="458" height="308" alt="earth" /> -<img src="images/flight.jpg" width="512" height="307" alt="flight" /> -<img src="images/rocket.jpg" width="300" height="353" alt="rocket" /> - -<a id="previous" href="#">Previous</a> -<a id="next" href="#">Next</a> - -</div><!-- End demo --> - +<div id="container"> + <img src="images/earth.jpg" width="458" height="308" alt="earth"> + <img src="images/flight.jpg" width="512" height="307" alt="flight"> + <img src="images/rocket.jpg" width="300" height="353" alt="rocket"> + <a id="previous" href="#">Previous</a> + <a id="next" href="#">Next</a> +</div> <div class="demo-description"> <p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position 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!</p> -</div><!-- End demo-description --> - +<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!</p> +</div> </body> </html> |