third-party/jquery-ui-1.10.2/demos/position/cycler.html

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