PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/highslide/examples/gallery-thumbstrip-above.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.outlineType = 'glossy-dark';
  31  hs.wrapperClassName = 'dark';
  32  hs.captionEval = 'this.a.title';
  33  hs.numberPosition = 'caption';
  34  hs.useBox = true;
  35  hs.width = 600;
  36  hs.height = 400;
  37  //hs.dimmingOpacity = 0.8;

  38  
  39  // Add the slideshow providing the controlbar and the thumbstrip

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

  42      interval: 5000,
  43      repeat: false,
  44      useControls: true,
  45      fixedControls: 'fit',
  46      overlayOptions: {
  47          position: 'bottom center',
  48          opacity: 0.75,
  49          hideOnMouseOut: true
  50      },
  51      thumbstrip: {
  52          position: 'above',
  53          mode: 'horizontal',
  54          relativeTo: 'expander'
  55      }
  56  });
  57  
  58  // Make all images animate to the one visible thumbnail

  59  var miniGalleryOptions1 = {
  60      thumbnailId: 'thumb1'
  61  }
  62  </script>
  63  
  64  
  65  </head>
  66  
  67  <body>
  68  
  69  <!--
  70      3) Put the thumbnails inside a div for styling
  71  -->
  72  
  73  <div class="highslide-gallery">
  74  <!--
  75      4) This is how you mark up the thumbnail images with an anchor tag around it.
  76      The anchor's href attribute defines the URL of the full-size image. Given the captionEval
  77      option is set to 'this.a.title', the caption is grabbed from the title attribute of
  78      the anchor.
  79  -->
  80  
  81      <a class='highslide' id="thumb1" href='../images/thumbstrip11.jpg' title="Two cabins"
  82              onclick="return hs.expand(this, miniGalleryOptions1)">
  83          <img src='../images/thumbstrip11.thumb.png' alt=''/></a>
  84  
  85      <div class="hidden-container">
  86  
  87          <a class='highslide' href='../images/thumbstrip12.jpg' title="Patterns in the snow"
  88                  onclick="return hs.expand(this, miniGalleryOptions1)">
  89              <img src='../images/thumbstrip12.thumb.png' alt=''/></a>
  90  
  91          <a class='highslide' href='../images/thumbstrip13.jpg' title="Cabins"
  92                  onclick="return hs.expand(this, miniGalleryOptions1)">
  93              <img src='../images/thumbstrip13.thumb.png' alt=''/></a>
  94  
  95          <a class='highslide' href='../images/thumbstrip14.jpg' title="Old stone cabins"
  96                  onclick="return hs.expand(this, miniGalleryOptions1)">
  97              <img src='../images/thumbstrip14.thumb.png' alt=''/></a>
  98  
  99          <a class='highslide' href='../images/thumbstrip15.jpg' title="A litte open water"
 100                  onclick="return hs.expand(this, miniGalleryOptions1)">
 101              <img src='../images/thumbstrip15.thumb.png' alt=''/></a>
 102  
 103          <a class='highslide' href='../images/thumbstrip16.jpg' title="Dipper"
 104                  onclick="return hs.expand(this, miniGalleryOptions1)">
 105              <img src='../images/thumbstrip16.thumb.png' alt=''/></a>
 106  
 107          <a class='highslide' href='../images/thumbstrip17.jpg' title="Dipper"
 108                  onclick="return hs.expand(this, miniGalleryOptions1)">
 109              <img src='../images/thumbstrip17.thumb.png' alt=''/></a>
 110  
 111          <a class='highslide' href='../images/thumbstrip18.jpg' title="Mountains"
 112                  onclick="return hs.expand(this, miniGalleryOptions1)">
 113              <img src='../images/thumbstrip18.thumb.png' alt=''/></a>
 114  
 115          <a class='highslide' href='../images/thumbstrip19.jpg' title="Birch trees"
 116                  onclick="return hs.expand(this, miniGalleryOptions1)">
 117              <img src='../images/thumbstrip19.thumb.png' alt=''/></a>
 118  
 119          <a class='highslide' href='../images/thumbstrip20.jpg' title="Highland woods"
 120                  onclick="return hs.expand(this, miniGalleryOptions1)">
 121              <img src='../images/thumbstrip20.thumb.png' alt=''/></a>
 122  
 123          <a class='highslide' href='../images/thumbstrip21.jpg' title="Frozen lake"
 124                  onclick="return hs.expand(this, miniGalleryOptions1)">
 125              <img src='../images/thumbstrip21.thumb.png' alt=''/></a>
 126  
 127          <a class='highslide' href='../images/thumbstrip22.jpg' title="Spring in the mountains"
 128                  onclick="return hs.expand(this, miniGalleryOptions1)">
 129              <img src='../images/thumbstrip22.thumb.png' alt=''/></a>
 130  
 131          <a class='highslide' href='../images/thumbstrip23.jpg' title="Spring in the mountains"
 132                  onclick="return hs.expand(this, miniGalleryOptions1)">
 133              <img src='../images/thumbstrip23.thumb.png' alt=''/></a>
 134  
 135          <a class='highslide' href='../images/thumbstrip24.jpg' title="Fjord landscape"
 136                  onclick="return hs.expand(this, miniGalleryOptions1)">
 137              <img src='../images/thumbstrip24.thumb.png' alt=''/></a>
 138  
 139      </div>
 140  </div>
 141  </body>
 142  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

/sites/all/libraries/highslide/examples/ -> gallery-thumbstrip-above.html (source)
