corrade-http-templates – Blame information for rev 62
?pathlinks?
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 62 | office | 1 | <!doctype html> |
| 2 | <html lang="en"> |
||
| 3 | <head> |
||
| 4 | <meta charset="utf-8"> |
||
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
||
| 6 | <title>jQuery UI Position - Image Cycler</title> |
||
| 7 | <link rel="stylesheet" href="../../themes/base/all.css"> |
||
| 8 | <link rel="stylesheet" href="../demos.css"> |
||
| 9 | <style> |
||
| 10 | body { |
||
| 11 | margin: 0; |
||
| 12 | } |
||
| 13 | #container { |
||
| 14 | overflow: hidden; |
||
| 15 | position: relative; |
||
| 16 | height: 400px; |
||
| 17 | } |
||
| 18 | |||
| 19 | img { |
||
| 20 | position: absolute; |
||
| 21 | } |
||
| 22 | </style> |
||
| 23 | <script src="../../external/requirejs/require.js"></script> |
||
| 24 | <script src="../bootstrap.js"> |
||
| 25 | function left( element, using ) { |
||
| 26 | element.position({ |
||
| 27 | my: "right middle", |
||
| 28 | at: "left+25 middle", |
||
| 29 | of: "#container", |
||
| 30 | collision: "none", |
||
| 31 | using: using |
||
| 32 | }); |
||
| 33 | } |
||
| 34 | function right( element, using ) { |
||
| 35 | element.position({ |
||
| 36 | my: "left middle", |
||
| 37 | at: "right-25 middle", |
||
| 38 | of: "#container", |
||
| 39 | collision: "none", |
||
| 40 | using: using |
||
| 41 | }); |
||
| 42 | } |
||
| 43 | function center( element, using ) { |
||
| 44 | element.position({ |
||
| 45 | my: "center middle", |
||
| 46 | at: "center middle", |
||
| 47 | of: "#container", |
||
| 48 | using: using |
||
| 49 | }); |
||
| 50 | } |
||
| 51 | |||
| 52 | left( $( "img:eq(0)" ) ); |
||
| 53 | center( $( "img:eq(1)" ) ); |
||
| 54 | right( $( "img:eq(2)" ) ); |
||
| 55 | |||
| 56 | function animate( to ) { |
||
| 57 | $( this ).stop( true, false ).animate( to ); |
||
| 58 | } |
||
| 59 | function next( event ) { |
||
| 60 | event.preventDefault(); |
||
| 61 | center( $( "img:eq(2)" ), animate ); |
||
| 62 | left( $( "img:eq(1)" ), animate ); |
||
| 63 | right( $( "img:eq(0)" ).appendTo( "#container" ) ); |
||
| 64 | } |
||
| 65 | function previous( event ) { |
||
| 66 | event.preventDefault(); |
||
| 67 | center( $( "img:eq(0)" ), animate ); |
||
| 68 | right( $( "img:eq(1)" ), animate ); |
||
| 69 | left( $( "img:eq(2)" ).prependTo( "#container" ) ); |
||
| 70 | } |
||
| 71 | $( "#previous" ).on( "click", previous ); |
||
| 72 | $( "#next" ).on( "click", next ); |
||
| 73 | |||
| 74 | $( "img" ).on( "click", function( event ) { |
||
| 75 | $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); |
||
| 76 | }); |
||
| 77 | |||
| 78 | $( window ).on( "resize", function() { |
||
| 79 | left( $( "img:eq(0)" ), animate ); |
||
| 80 | center( $( "img:eq(1)" ), animate ); |
||
| 81 | right( $( "img:eq(2)" ), animate ); |
||
| 82 | }); |
||
| 83 | </script> |
||
| 84 | </head> |
||
| 85 | <body> |
||
| 86 | |||
| 87 | <div id="container"> |
||
| 88 | <img src="images/earth.jpg" width="458" height="308" alt="earth"> |
||
| 89 | <img src="images/flight.jpg" width="512" height="307" alt="flight"> |
||
| 90 | <img src="images/rocket.jpg" width="300" height="353" alt="rocket"> |
||
| 91 | |||
| 92 | <a id="previous" href="#">Previous</a> |
||
| 93 | <a id="next" href="#">Next</a> |
||
| 94 | </div> |
||
| 95 | |||
| 96 | <div class="demo-description"> |
||
| 97 | <p>A photoviewer prototype using Position to place images at the center, left and right and cycle them. |
||
| 98 | <br>Use the links at the top to cycle, or click on the images on the left and right. |
||
| 99 | <br>Note how the images are repositioned when resizing the window. |
||
| 100 | </div> |
||
| 101 | </body> |
||
| 102 | </html> |