PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/highslide/examples/mini-galleries.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  
   6  <title>Highslide JS</title>
   7  
   8  <!--
   9      1 ) Reference to the files containing the JavaScript and CSS.
  10      These files must be located on your server.
  11  -->
  12  
  13  <script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
  14  <link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
  15  
  16  <!--
  17      2) Optionally override the settings defined at the top
  18      of the highslide.js file. The parameter hs.graphicsDir is important!
  19  -->
  20  
  21  <script type="text/javascript">
  22  hs.graphicsDir = '../highslide/graphics/';
  23  hs.align = 'center';
  24  hs.transitions = ['expand', 'crossfade'];
  25  hs.outlineType = 'rounded-white';
  26  hs.fadeInOut = true;
  27  hs.numberPosition = 'caption';
  28  hs.dimmingOpacity = 0.75;
  29  
  30  // Add the controlbar
  31  if (hs.addSlideshow) hs.addSlideshow({
  32      //slideshowGroup: 'group1',
  33      interval: 5000,
  34      repeat: false,
  35      useControls: true,
  36      fixedControls: 'fit',
  37      overlayOptions: {
  38          opacity: .75,
  39          position: 'bottom center',
  40          hideOnMouseOut: true
  41      }
  42  });
  43  </script>
  44  
  45  </head>
  46  
  47  <body>
  48  
  49  <!--
  50      3) Put the thumbnails inside a div for styling
  51  -->
  52  <div class="highslide-gallery">
  53  <!--
  54      4) This is how you mark up the thumbnail image with an anchor tag around it.
  55      The anchor's href attribute defines the URL of the full-size image.
  56  -->
  57  <a id="thumb1" href="../images/thumbstrip01.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )">
  58      <img src="../images/thumbstrip01.thumb.png" alt="Highslide JS"
  59          title="Click to enlarge" />
  60  </a>
  61  Click the thumbnail to open the first gallery.
  62  
  63  <!--
  64      5 (optional). This is how you mark up the caption. The correct class name is important.
  65  -->
  66  
  67  <div class="highslide-caption">
  68      Caption for the first image. This caption can be styled using CSS.
  69  </div>
  70  
  71  
  72  <!--
  73      6) Put the subsequent thumbnails in a hidden container. The thumbnailId parameter ensures
  74      these thumbnails zoom back out to the right thumbnail when closed.
  75  -->
  76  <div class="hidden-container">
  77      <a href="../images/thumbstrip02.jpg" class="highslide" 
  78          onclick="return hs.expand(this, { thumbnailId: 'thumb1', slideshowGroup: 1 })"></a>
  79      <div class="highslide-caption">
  80          Caption for the second image in the first group.
  81      </div>
  82  
  83      <a href="../images/thumbstrip03.jpg" class="highslide" 
  84          onclick="return hs.expand(this,    { thumbnailId: 'thumb1', slideshowGroup: 1 })"></a>
  85      <div class="highslide-caption">
  86          Caption for the third image in the first group.
  87      </div>
  88  </div>
  89  </div>
  90  
  91  <!--
  92      7) The second gallery. Notice the different slideshowGroup and thumbnailId
  93  -->
  94  <div class="highslide-gallery">
  95  <!--
  96      4) This is how you mark up the thumbnail image with an anchor tag around it.
  97      The anchor's href attribute defines the URL of the full-size image.
  98  -->
  99  <a id="thumb2" href="../images/thumbstrip04.jpg" class="highslide" 
 100          onclick="return hs.expand(this,    { slideshowGroup: 2} )">
 101      <img src="../images/thumbstrip04.thumb.png" alt="Highslide JS"
 102          title="Click to enlarge" />
 103  </a>
 104  
 105  Click the thumbnail to open the second gallery.
 106  <!--
 107      5 (optional). This is how you mark up the caption. The correct class name is important.
 108  -->
 109  
 110  <div class="highslide-caption">
 111      Caption for the first image in the second group. This caption can be styled using CSS.
 112  </div>
 113  
 114  
 115  <!--
 116      6) Put the subsequent thumbnails in a hidden container. The thumbnailId parameter ensures
 117      these thumbnails zoom back out to the right thumbnail when closed.
 118  -->
 119  <div class="hidden-container">
 120      <a href="../images/thumbstrip05.jpg" class="highslide" 
 121          onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 2 })"></a>
 122      <div class="highslide-caption">
 123          Caption for the second image in the second group.
 124      </div>
 125  
 126      <a href="../images/thumbstrip06.jpg" class="highslide" 
 127          onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 2 })"></a>
 128      <div class="highslide-caption">
 129          Caption for the third image in the second group.
 130      </div>
 131  </div>
 132  
 133  </div>
 134  </body>
 135  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

/sites/all/libraries/highslide/examples/ -> mini-galleries.html (source)
