PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/highslide/examples/gallery-horizontal-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-full.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.outlineType = 'rounded-white';
  32  hs.captionEval = 'this.thumb.alt';
  33  hs.marginBottom = 105; // make room for the thumbstrip and the controls

  34  hs.numberPosition = 'caption';
  35  
  36  // Add the slideshow providing the controlbar and the thumbstrip

  37  hs.addSlideshow({
  38      //slideshowGroup: 'group1',

  39      interval: 5000,
  40      repeat: false,
  41      useControls: true,
  42      overlayOptions: {
  43          className: 'text-controls',
  44          position: 'bottom center',
  45          relativeTo: 'viewport',
  46          offsetY: -60
  47      },
  48      thumbstrip: {
  49          position: 'bottom center',
  50          mode: 'horizontal',
  51          relativeTo: 'viewport'
  52      }
  53  });
  54  </script>
  55  
  56  
  57  </head>
  58  
  59  <body>
  60  
  61  <!--
  62      3) Put the thumbnails inside a div for styling
  63  -->
  64  
  65  <div class="highslide-gallery" style="width: 600px; margin: auto">
  66  <!--
  67      4) This is how you mark up the thumbnail images with an anchor tag around it.
  68      The anchor's href attribute defines the URL of the full-size image. Given the captionEval
  69      option is set to 'this.img.alt', the caption is grabbed from the alt attribute of
  70      the thumbnail image.
  71  -->
  72      <a class='highslide' href='../images/thumbstrip01.jpg' onclick="return hs.expand(this)">
  73          <img src='../images/thumbstrip01.thumb.png' alt='Mountain valley'/></a>
  74  
  75      <a class='highslide' href='../images/thumbstrip02.jpg' onclick="return hs.expand(this)">
  76          <img src='../images/thumbstrip02.thumb.png' alt='Windy landscape'/></a>
  77  
  78      <a class='highslide' href='../images/thumbstrip03.jpg' onclick="return hs.expand(this)">
  79          <img src='../images/thumbstrip03.thumb.png' alt='Sunset in the mountain'/></a>
  80  
  81      <a class='highslide' href='../images/thumbstrip04.jpg' onclick="return hs.expand(this)">
  82          <img src='../images/thumbstrip04.thumb.png' alt='Resting skier'/></a>
  83  
  84      <a class='highslide' href='../images/thumbstrip05.jpg' onclick="return hs.expand(this)">
  85          <img src='../images/thumbstrip05.thumb.png' alt='Contemplating dog'/></a>
  86  
  87      <a class='highslide' href='../images/thumbstrip06.jpg' onclick="return hs.expand(this)">
  88          <img src='../images/thumbstrip06.thumb.png' alt='Cabins'/></a>
  89  
  90      <a class='highslide' href='../images/thumbstrip07.jpg' onclick="return hs.expand(this)">
  91          <img src='../images/thumbstrip07.thumb.png' alt='Dark skies in sunny landscape'/></a>
  92  
  93      <a class='highslide' href='../images/thumbstrip08.jpg' onclick="return hs.expand(this)">
  94          <img src='../images/thumbstrip08.thumb.png' alt='Blue sky'/></a>
  95  
  96      <a class='highslide' href='../images/thumbstrip09.jpg' onclick="return hs.expand(this)">
  97          <img src='../images/thumbstrip09.thumb.png' alt='Ptarmigan'/></a>
  98  
  99      <a class='highslide' href='../images/thumbstrip10.jpg' onclick="return hs.expand(this)">
 100          <img src='../images/thumbstrip10.thumb.png' alt='Ptarmigans'/></a>
 101  
 102      <a class='highslide' href='../images/thumbstrip11.jpg' onclick="return hs.expand(this)">
 103          <img src='../images/thumbstrip11.thumb.png' alt='Two cabins'/></a>
 104  
 105      <a class='highslide' href='../images/thumbstrip12.jpg' onclick="return hs.expand(this)">
 106          <img src='../images/thumbstrip12.thumb.png' alt='Patterns in the snow'/></a>
 107  
 108      <a class='highslide' href='../images/thumbstrip13.jpg' onclick="return hs.expand(this)">
 109          <img src='../images/thumbstrip13.thumb.png' alt='Cabins'/></a>
 110  
 111      <a class='highslide' href='../images/thumbstrip14.jpg' onclick="return hs.expand(this)">
 112          <img src='../images/thumbstrip14.thumb.png' alt='Old stone cabins'/></a>
 113  
 114      <a class='highslide' href='../images/thumbstrip15.jpg' onclick="return hs.expand(this)">
 115          <img src='../images/thumbstrip15.thumb.png' alt='A litte open water'/></a>
 116  
 117      <a class='highslide' href='../images/thumbstrip16.jpg' onclick="return hs.expand(this)">
 118          <img src='../images/thumbstrip16.thumb.png' alt='Dipper'/></a>
 119  
 120      <a class='highslide' href='../images/thumbstrip17.jpg' onclick="return hs.expand(this)">
 121          <img src='../images/thumbstrip17.thumb.png' alt='Dipper'/></a>
 122  
 123      <a class='highslide' href='../images/thumbstrip18.jpg' onclick="return hs.expand(this)">
 124          <img src='../images/thumbstrip18.thumb.png' alt='Mountains'/></a>
 125  
 126      <a class='highslide' href='../images/thumbstrip19.jpg' onclick="return hs.expand(this)">
 127          <img src='../images/thumbstrip19.thumb.png' alt='Birch trees'/></a>
 128  
 129      <a class='highslide' href='../images/thumbstrip20.jpg' onclick="return hs.expand(this)">
 130          <img src='../images/thumbstrip20.thumb.png' alt='Highland woods'/></a>
 131  
 132      <a class='highslide' href='../images/thumbstrip21.jpg' onclick="return hs.expand(this)">
 133          <img src='../images/thumbstrip21.thumb.png' alt='Frozen lake'/></a>
 134  
 135      <a class='highslide' href='../images/thumbstrip22.jpg' onclick="return hs.expand(this)">
 136          <img src='../images/thumbstrip22.thumb.png' alt='Spring in the mountains'/></a>
 137  
 138      <a class='highslide' href='../images/thumbstrip23.jpg' onclick="return hs.expand(this)">
 139          <img src='../images/thumbstrip23.thumb.png' alt='Spring in the mountains'/></a>
 140  
 141      <a class='highslide' href='../images/thumbstrip24.jpg' onclick="return hs.expand(this)">
 142          <img src='../images/thumbstrip24.thumb.png' alt='Fjord landscape'/></a>
 143  
 144  
 145  </div>
 146  </body>
 147  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

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