PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/highslide/examples/gallery-vertical-strip.html source

[Summary view] [Print] [Text view]
   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
   2  <html>
   3  <head>
   4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5  <title>Highslide JS</title>
   6  
   7  <!--
   8      1 ) Reference to the files containing the JavaScript and CSS.
   9      These files must be located on your server.
  10  -->
  11  
  12  <script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
  13  <link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
  14  <!--[if lt IE 7]>
  15  <link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
  16  <![endif]-->
  17  
  18  
  19  
  20  <!--
  21      2) Optionally override the settings defined at the top
  22      of the highslide.js file. The parameter hs.graphicsDir is important!
  23  -->
  24  
  25  <script type="text/javascript">
  26      hs.graphicsDir = '../highslide/graphics/';
  27      hs.align = 'center';
  28      hs.transitions = ['expand', 'crossfade'];
  29      hs.fadeInOut = true;
  30      hs.dimmingOpacity = 0.8;
  31      hs.wrapperClassName = 'borderless floating-caption';
  32      hs.captionEval = 'this.thumb.alt';
  33      hs.marginLeft = 100; // make room for the thumbstrip

  34      hs.marginBottom = 80 // make room for the controls and the floating caption
  35      hs.numberPosition = 'caption';
  36      hs.lang.number = '%1/%2';
  37  
  38      // Add the slideshow providing the controlbar and the thumbstrip

  39      hs.addSlideshow({
  40          //slideshowGroup: 'group1',

  41          interval: 5000,
  42          repeat: false,
  43          useControls: true,
  44          overlayOptions: {
  45              className: 'text-controls',
  46              position: 'bottom center',
  47              relativeTo: 'viewport',
  48              offsetX: 50,
  49              offsetY: -5
  50  
  51          },
  52          thumbstrip: {
  53              position: 'middle left',
  54              mode: 'vertical',
  55              relativeTo: 'viewport'
  56          }
  57      });
  58  
  59      // Add the simple close button

  60      hs.registerOverlay({
  61          html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
  62          position: 'top right',
  63          fade: 2 // fading the semi-transparent overlay looks bad in IE
  64      });
  65  </script>
  66  
  67  <!--
  68      3) Add some extra CSS for this example
  69  -->
  70  <style type="text/css">
  71  /* Center the text in the caption */

  72  .highslide-caption {
  73      width: 100%;
  74      text-align: center;
  75  }
  76  /* Remove the close button from the controls since we already have one in the corner of the image */

  77  .highslide-close {
  78      display: none !important;
  79  }
  80  /* Put the image number in front of the caption */

  81  .highslide-number {
  82      display: inline;
  83      padding-right: 1em;
  84      color: white;
  85  }
  86  </style>
  87  
  88  </head>
  89  
  90  <body>
  91  
  92  <!--
  93      4) Put the thumbnails inside a div for styling
  94  -->
  95  
  96  <div class="highslide-gallery" style="width: 600px; margin: auto">
  97  <!--
  98      5) This is how you mark up the thumbnail images with an anchor tag around it.
  99      The anchor's href attribute defines the URL of the full-size image. Given the captionEval
 100      option is set to 'this.img.alt', the caption is grabbed from the alt attribute of
 101      the thumbnail image.
 102  -->
 103      <a class='highslide' href='../images/thumbstrip01.jpg' onclick="return hs.expand(this)">
 104          <img src='../images/thumbstrip01.thumb.png' alt='Mountain valley'/></a>
 105  
 106      <a class='highslide' href='../images/thumbstrip02.jpg' onclick="return hs.expand(this)">
 107          <img src='../images/thumbstrip02.thumb.png' alt='Windy landscape'/></a>
 108  
 109      <a class='highslide' href='../images/thumbstrip03.jpg' onclick="return hs.expand(this)">
 110          <img src='../images/thumbstrip03.thumb.png' alt='Sunset in the mountain'/></a>
 111  
 112      <a class='highslide' href='../images/thumbstrip04.jpg' onclick="return hs.expand(this)">
 113          <img src='../images/thumbstrip04.thumb.png' alt='Resting skier'/></a>
 114  
 115      <a class='highslide' href='../images/thumbstrip05.jpg' onclick="return hs.expand(this)">
 116          <img src='../images/thumbstrip05.thumb.png' alt='Contemplating dog'/></a>
 117  
 118      <a class='highslide' href='../images/thumbstrip06.jpg' onclick="return hs.expand(this)">
 119          <img src='../images/thumbstrip06.thumb.png' alt='Cabins'/></a>
 120  
 121      <a class='highslide' href='../images/thumbstrip07.jpg' onclick="return hs.expand(this)">
 122          <img src='../images/thumbstrip07.thumb.png' alt='Dark skies in sunny landscape'/></a>
 123  
 124      <a class='highslide' href='../images/thumbstrip08.jpg' onclick="return hs.expand(this)">
 125          <img src='../images/thumbstrip08.thumb.png' alt='Blue sky'/></a>
 126  
 127      <a class='highslide' href='../images/thumbstrip09.jpg' onclick="return hs.expand(this)">
 128          <img src='../images/thumbstrip09.thumb.png' alt='Ptarmigan'/></a>
 129  
 130      <a class='highslide' href='../images/thumbstrip10.jpg' onclick="return hs.expand(this)">
 131          <img src='../images/thumbstrip10.thumb.png' alt='Ptarmigans'/></a>
 132  
 133      <a class='highslide' href='../images/thumbstrip11.jpg' onclick="return hs.expand(this)">
 134          <img src='../images/thumbstrip11.thumb.png' alt='Two cabins'/></a>
 135  
 136      <a class='highslide' href='../images/thumbstrip12.jpg' onclick="return hs.expand(this)">
 137          <img src='../images/thumbstrip12.thumb.png' alt='Patterns in the snow'/></a>
 138  
 139      <a class='highslide' href='../images/thumbstrip13.jpg' onclick="return hs.expand(this)">
 140          <img src='../images/thumbstrip13.thumb.png' alt='Cabins'/></a>
 141  
 142      <a class='highslide' href='../images/thumbstrip14.jpg' onclick="return hs.expand(this)">
 143          <img src='../images/thumbstrip14.thumb.png' alt='Old stone cabins'/></a>
 144  
 145      <a class='highslide' href='../images/thumbstrip15.jpg' onclick="return hs.expand(this)">
 146          <img src='../images/thumbstrip15.thumb.png' alt='A litte open water'/></a>
 147  
 148      <a class='highslide' href='../images/thumbstrip16.jpg' onclick="return hs.expand(this)">
 149          <img src='../images/thumbstrip16.thumb.png' alt='Dipper'/></a>
 150  
 151      <a class='highslide' href='../images/thumbstrip17.jpg' onclick="return hs.expand(this)">
 152          <img src='../images/thumbstrip17.thumb.png' alt='Dipper'/></a>
 153  
 154      <a class='highslide' href='../images/thumbstrip18.jpg' onclick="return hs.expand(this)">
 155          <img src='../images/thumbstrip18.thumb.png' alt='Mountains'/></a>
 156  
 157      <a class='highslide' href='../images/thumbstrip19.jpg' onclick="return hs.expand(this)">
 158          <img src='../images/thumbstrip19.thumb.png' alt='Birch trees'/></a>
 159  
 160      <a class='highslide' href='../images/thumbstrip20.jpg' onclick="return hs.expand(this)">
 161          <img src='../images/thumbstrip20.thumb.png' alt='Highland woods'/></a>
 162  
 163      <a class='highslide' href='../images/thumbstrip21.jpg' onclick="return hs.expand(this)">
 164          <img src='../images/thumbstrip21.thumb.png' alt='Frozen lake'/></a>
 165  
 166      <a class='highslide' href='../images/thumbstrip22.jpg' onclick="return hs.expand(this)">
 167          <img src='../images/thumbstrip22.thumb.png' alt='Spring in the mountains'/></a>
 168  
 169      <a class='highslide' href='../images/thumbstrip23.jpg' onclick="return hs.expand(this)">
 170          <img src='../images/thumbstrip23.thumb.png' alt='Spring in the mountains'/></a>
 171  
 172      <a class='highslide' href='../images/thumbstrip24.jpg' onclick="return hs.expand(this)">
 173          <img src='../images/thumbstrip24.thumb.png' alt='Fjord landscape'/></a>
 174  
 175  
 176  </div>
 177  </body>
 178  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

/sites/all/libraries/highslide/examples/ -> gallery-vertical-strip.html (source)
