PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/highslide/examples/gallery-floating-thumbs.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 = 'rounded-white';
  31      hs.headingEval = 'this.a.title';
  32      hs.numberPosition = 'heading';
  33      hs.useBox = true;
  34      hs.width = 600;
  35      hs.height = 400;
  36      hs.showCredits = false;
  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: 'top right',
  48              offsetX: 200,
  49              offsetY: -65
  50          },
  51          thumbstrip: {
  52              position: 'rightpanel',
  53              mode: 'float',
  54              relativeTo: 'expander',
  55              width: '210px'
  56          }
  57      });
  58  
  59      // Make all images animate to the one visible thumbnail

  60      var miniGalleryOptions1 = {
  61          thumbnailId: 'thumb1'
  62      }
  63  </script>
  64  
  65  </head>
  66  
  67  <body>
  68  
  69  <!--
  70      4) Put the thumbnails inside a div for styling
  71  -->
  72  
  73  <div class="highslide-gallery">
  74  <!--
  75      5) 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' onclick="return hs.expand(this, miniGalleryOptions1)" title="Two cabins">
  82          <img src='../images/thumbstrip11.thumb.png' alt=''/></a>
  83  
  84      <div class="hidden-container">
  85          <a class='highslide' href='../images/thumbstrip09.jpg' onclick="return hs.expand(this)"
  86                  title="Ptarmigan">
  87              <img src='../images/thumbstrip09.thumb.png' alt=''/></a>
  88  
  89          <a class='highslide' href='../images/thumbstrip12.jpg' title="Patterns in the snow"
  90                  onclick="return hs.expand(this, miniGalleryOptions1)">
  91              <img src='../images/thumbstrip12.thumb.png' alt=''/></a>
  92  
  93          <a class='highslide' href='../images/thumbstrip13.jpg' title="Cabins"
  94                  onclick="return hs.expand(this, miniGalleryOptions1)">
  95              <img src='../images/thumbstrip13.thumb.png' alt=''/></a>
  96  
  97          <a class='highslide' href='../images/thumbstrip14.jpg' title="Old stone cabins"
  98                  onclick="return hs.expand(this, miniGalleryOptions1)">
  99              <img src='../images/thumbstrip14.thumb.png' alt=''/></a>
 100  
 101          <a class='highslide' href='../images/thumbstrip15.jpg' title="A litte open water"
 102                  onclick="return hs.expand(this, miniGalleryOptions1)">
 103              <img src='../images/thumbstrip15.thumb.png' alt=''/></a>
 104  
 105          <a class='highslide' href='../images/thumbstrip16.jpg' title="Dipper"
 106                  onclick="return hs.expand(this, miniGalleryOptions1)">
 107              <img src='../images/thumbstrip16.thumb.png' alt=''/></a>
 108  
 109          <a class='highslide' href='../images/thumbstrip17.jpg' title="Dipper"
 110                  onclick="return hs.expand(this, miniGalleryOptions1)">
 111              <img src='../images/thumbstrip17.thumb.png' alt=''/></a>
 112  
 113          <a class='highslide' href='../images/thumbstrip18.jpg' title="Mountains"
 114                  onclick="return hs.expand(this, miniGalleryOptions1)">
 115              <img src='../images/thumbstrip18.thumb.png' alt=''/></a>
 116  
 117          <a class='highslide' href='../images/thumbstrip19.jpg' title="Birch trees"
 118                  onclick="return hs.expand(this, miniGalleryOptions1)">
 119              <img src='../images/thumbstrip19.thumb.png' alt=''/></a>
 120  
 121          <a class='highslide' href='../images/thumbstrip20.jpg' title="Highland woods"
 122                  onclick="return hs.expand(this, miniGalleryOptions1)">
 123              <img src='../images/thumbstrip20.thumb.png' alt=''/></a>
 124  
 125          <a class='highslide' href='../images/thumbstrip21.jpg' title="Frozen lake"
 126                  onclick="return hs.expand(this, miniGalleryOptions1)">
 127              <img src='../images/thumbstrip21.thumb.png' alt=''/></a>
 128  
 129          <a class='highslide' href='../images/thumbstrip22.jpg' title="Spring in the mountains"
 130                  onclick="return hs.expand(this, miniGalleryOptions1)">
 131              <img src='../images/thumbstrip22.thumb.png' alt=''/></a>
 132  
 133          <a class='highslide' href='../images/thumbstrip23.jpg' title="Spring in the mountains"
 134                  onclick="return hs.expand(this, miniGalleryOptions1)">
 135              <img src='../images/thumbstrip23.thumb.png' alt=''/></a>
 136  
 137          <a class='highslide' href='../images/thumbstrip24.jpg' title="Fjord landscape"
 138                  onclick="return hs.expand(this, miniGalleryOptions1)">
 139              <img src='../images/thumbstrip24.thumb.png' alt=''/></a>
 140  
 141      </div>
 142  </div>
 143  </body>
 144  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

/sites/all/libraries/highslide/examples/ -> gallery-floating-thumbs.html (source)
