PHPXRef 0.7 : Drupal 6 (gatewave) : /sites/all/modules/jquery_ui/jquery.ui.old/demos/real-world/product-slider/index.html source

[Summary view] [Print] [Text view]
   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   5      <title>Slider Gallery</title>
   6      <style type="text/css" media="screen">
   7      <!--
   8          body {
   9              padding: 0; 
  10              font: 1em "Trebuchet MS", verdana, arial, sans-serif; 
  11              font-size: 100%;
  12              background-color: #212121;
  13              margin: 0;
  14          }
  15  
  16          h1 { 
  17              margin-bottom: 2px; 
  18          }
  19  
  20          #container {

  21              background-color: #fff;
  22              width: 580px;
  23              margin: 15px auto;
  24              padding: 50px;
  25          }
  26          
  27          /* slider specific CSS */

  28          .sliderGallery {
  29              background: url(images/productbrowser_background_20070622.jpg) no-repeat;
  30              overflow: hidden;
  31              position: relative;
  32              padding: 10px;
  33              height: 160px;
  34              width: 560px;
  35          }
  36          
  37          .sliderGallery UL {
  38              position: absolute;
  39              list-style: none;
  40              overflow: none;
  41              white-space: nowrap;
  42              padding: 0;
  43              margin: 0;
  44          }
  45          
  46          .sliderGallery UL LI {
  47              display: inline;
  48          }
  49          
  50          .slider {
  51              width: 542px;
  52              height: 17px;
  53              margin-top: 140px;
  54              margin-left: 5px;
  55              padding: 1px;
  56              position: absolute;
  57              background: url(images/productbrowser_scrollbar_20070622.png) no-repeat;
  58          }
  59          
  60          .handle {
  61              position: absolute;
  62              cursor: move;
  63              height: 17px;
  64              width: 181px;
  65              top: 0;
  66              background: url(images/productbrowser_scroller_20080115.png) no-repeat;
  67              z-index: 100;
  68          }
  69          
  70          .slider span {
  71              color: #bbb;
  72              font-size: 80%;
  73              cursor: pointer;
  74              position: absolute;
  75              z-index: 110;
  76              top: 3px;
  77          }
  78          
  79          .slider .slider-lbl1 {
  80              left: 50px;
  81          }
  82          
  83          .slider .slider-lbl2 {
  84              left: 107px;
  85          }
  86          
  87          .slider .slider-lbl3 {
  88              left: 156px;
  89          }
  90  
  91          .slider .slider-lbl4 {
  92              left: 280px;
  93          }
  94  
  95          .slider .slider-lbl5 {
  96              left: 455px;
  97          }
  98      -->
  99      </style>
 100  
 101      <script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
 102      <script type="text/javascript" src="../../../ui/ui.core.js"></script>
 103      <script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 104      
 105      <script type="text/javascript" charset="utf-8">
 106          /**

 107           * Note that we have to use window.onload because $(document).ready() fires before images are loaded

 108           * and ul.innerWidth() - container.outerWidth(); doesn't give the correct width because the width

 109           * of the UL hasn't expanded out until the images have finished rendering.

 110           */
 111          window.onload = function () {
 112              var container = $('div.sliderGallery');
 113              var ul = $('ul', container);
 114              
 115              var itemsWidth = ul.innerWidth() - container.outerWidth();
 116              
 117              $('.slider', container).slider({
 118                  min: 0,
 119                  max: itemsWidth,
 120                  handle: '.handle',
 121                  stop: function (event, ui) {
 122                      ul.animate({'left' : ui.value * -1}, 500);
 123                  },
 124                  slide: function (event, ui) {
 125                      ul.css('left', ui.value * -1);
 126                  }
 127              });
 128          };
 129      </script>
 130  </head>
 131  <body>
 132      <div id="container">
 133          <h1>Slider Gallery</h1>
 134          <p>This shows a demonstration of a slider widget from the jQuery UI library used to create the same effect used on <a href="http://www.apple.com/mac/">Apple's web site</a>.</p>
 135          <p><a href="http://jqueryfordesigners.com/slider-gallery">Read the article, and see the screencast this demonstration relates to</a></p>
 136  
 137          <div class="sliderGallery">
 138              <ul>
 139                  <li><img class="pb-airportexpress" src="images/pb_airport_express.jpg" /></li>
 140                  <li><img src="images/pb_airport_extreme.jpg" /></li>
 141                  <li><img src="images/pb_timecapsule_20080115.jpg" /></li>
 142                  <li><img src="images/pb_keyboards20070807.jpg" /></li>
 143                  <li><img src="images/pb_mighty_mouse.jpg" /></li>
 144                  <li><img src="images/pb_cinema_display20071026.jpg" /></li>
 145                  <li><img src="images/pb_mac_pro_20070622.jpg" /></li>
 146  
 147                  <li><img class="pb-macmini" src="images/pb_mac_mini.jpg" /></li>
 148                  <li><img src="images/pb_macbook20071026.jpg" /></li>
 149                  <li><img class="pb-macbookair" src="images/pb_macbookair_20080115.jpg" /></li>
 150                  <li><img class="pb-macbookpro" src="images/pb_macbook_pro20071026.jpg" /></li>
 151                  <li><img class="pb-imac" src="images/pb_imac20071026.jpg" /></li>
 152                  <li><img src="images/pb_macosx_20080115.jpg" /></li>
 153                  <li><img src="images/pb_ilife_20080115.jpg" /></li>
 154                  <li><img src="images/pb_dot_mac_20080115.jpg" /></li>
 155                  <li><img src="images/pb_iwork_20080115.jpg" /></li>
 156  
 157                  <li><img src="images/pb_quicktime.jpg" /></li>
 158                  <li><img src="images/pb_aperture20080212.jpg" /></li>
 159                  <li><img src="images/pb_final_cut_studio2_20080115.jpg" /></li>
 160                  <li><img src="images/pb_final_cut_express_20080115.jpg" /></li>
 161                  <li><img src="images/pb_logic_studio_20080115.jpg" /></li>
 162                  <li><img src="images/pb_logic_express_20080115.jpg" /></li>
 163                  <li><img src="images/pb_shake_20080115.jpg" /></li>                    
 164                  <li><img src="images/pb_apple_remote_desktop_20080115.jpg" /></li>
 165                  <li><img src="images/pb_xserve.jpg" /></li>
 166  
 167                  <li><img src="images/pb_xserve_raid.jpg" /></li>
 168                  <li><img class="pb-xsan" src="images/pb_xsan_20080115.jpg" /></li>
 169                  <li><img class="pb-macosxserver" src="images/pb_macosx_server20071016.jpg" /></li>                    
 170              </ul>
 171              <div class="slider">
 172                  <div class="handle"></div>
 173                  <span class="slider-lbl1">Wi-Fi</span>
 174                  <span class="slider-lbl3">Macs</span>
 175                  <span class="slider-lbl4">Applications</span>
 176                  <span class="slider-lbl5">Servers</span>
 177              </div>
 178          </div>
 179      </div>
 180  </body>
 181  </html>
 182  
 183  
 184  
 185
PHP Cross Reference of Drupal 6 (gatewave)

/sites/all/modules/jquery_ui/jquery.ui.old/demos/real-world/product-slider/ -> index.html (source)
