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

[Summary view] [Print] [Text view]
   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> 
   2  <html xmlns="http://www.w3.org/1999/xhtml"> 
   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      Add the slideshow and do some adaptations to this example.
  24  --> 
  25   
  26  <script type="text/javascript"> 
  27  //<![CDATA[

  28  hs.graphicsDir = '../highslide/graphics/';
  29  hs.transitions = ['expand', 'crossfade'];
  30  hs.restoreCursor = null;
  31  hs.lang.restoreTitle = 'Click for next image';
  32   
  33  // Add the slideshow providing the controlbar and the thumbstrip

  34  hs.addSlideshow({
  35      //slideshowGroup: 'group1',

  36      interval: 5000,
  37      repeat: true,
  38      useControls: true,
  39      overlayOptions: {
  40          position: 'bottom right',
  41          offsetY: 50
  42      },
  43      thumbstrip: {
  44          position: 'above',
  45          mode: 'horizontal',
  46          relativeTo: 'expander'
  47      }
  48  });
  49   
  50  // Options for the in-page items

  51  var inPageOptions = {
  52      //slideshowGroup: 'group1',

  53      outlineType: null,
  54      allowSizeReduction: false,
  55      wrapperClassName: 'in-page controls-in-heading',
  56      thumbnailId: 'gallery-area',
  57      useBox: true,
  58      width: 600,
  59      height: 400,
  60      targetX: 'gallery-area 10px',
  61      targetY: 'gallery-area 10px',
  62      captionEval: 'this.a.title',
  63      numberPosition: 'caption'
  64  }
  65   
  66  // Open the first thumb on page load

  67  hs.addEventListener(window, 'load', function() {
  68      document.getElementById('thumb1').onclick();
  69  });
  70   
  71  // Cancel the default action for image click and do next instead

  72  hs.Expander.prototype.onImageClick = function() {
  73      if (/in-page/.test(this.wrapper.className))    return hs.next();
  74  }
  75   
  76  // Under no circumstances should the static popup be closed

  77  hs.Expander.prototype.onBeforeClose = function() {
  78      if (/in-page/.test(this.wrapper.className))    return false;
  79  }
  80  // ... nor dragged

  81  hs.Expander.prototype.onDrag = function() {
  82      if (/in-page/.test(this.wrapper.className))    return false;
  83  }
  84   
  85  // Keep the position after window resize

  86  hs.addEventListener(window, 'resize', function() {
  87      var i, exp;
  88      hs.getPageSize();
  89   
  90      for (i = 0; i < hs.expanders.length; i++) {
  91          exp = hs.expanders[i];
  92          if (exp) {
  93              var x = exp.x,
  94                  y = exp.y;
  95   
  96              // get new thumb positions

  97              exp.tpos = hs.getPosition(exp.el);
  98              x.calcThumb();
  99              y.calcThumb();
 100   
 101              // calculate new popup position

 102               x.pos = x.tpos - x.cb + x.tb;
 103              x.scroll = hs.page.scrollLeft;
 104              x.clientSize = hs.page.width;
 105              y.pos = y.tpos - y.cb + y.tb;
 106              y.scroll = hs.page.scrollTop;
 107              y.clientSize = hs.page.height;
 108              exp.justify(x, true);
 109              exp.justify(y, true);
 110   
 111              // set new left and top to wrapper and outline

 112              exp.moveTo(x.pos, y.pos);
 113          }
 114      }
 115  });
 116  //]]>

 117  </script> 
 118   
 119  <!--
 120      3) Modify some of the styles
 121  --> 
 122  <style type="text/css"> 
 123      .highslide-image {
 124          border: 1px solid black;
 125      }
 126      .highslide-controls {
 127          width: 90px !important;
 128      }
 129      .highslide-controls .highslide-close {
 130          display: none;
 131      }
 132      .highslide-caption {
 133          padding: .5em 0;
 134      }
 135  </style> 
 136   
 137  </head> 
 138   
 139  <body> 
 140   
 141  <!--
 142      4)    Div where the gallery appears
 143  --> 
 144   
 145  <div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"> 
 146   
 147  <!--
 148      5)    Put all the thumbnails inside a hidden div where Highslide can index them to
 149          create the slideshow.
 150  --> 
 151   
 152  <div class="hidden-container"> 
 153  <!--
 154      6) This is how you mark up the thumbnail images with an anchor tag around it.
 155      The anchor's href attribute defines the URL of the full-size image. Given the captionEval
 156      option is set to 'this.a.title', the caption is grabbed from the title attribute of
 157      the anchor.
 158  --> 
 159   
 160      <a id="thumb1" class='highslide' href='../images/thumbstrip11.jpg'
 161              onclick="return hs.expand(this, inPageOptions)" title="Two cabins"> 
 162          <img src='../images/thumbstrip11.thumb.png' alt=''/></a> 
 163   
 164      <a class='highslide' href='../images/thumbstrip12.jpg'
 165              onclick="return hs.expand(this, inPageOptions)" title="Patterns in the snow"> 
 166          <img src='../images/thumbstrip12.thumb.png' alt=''/></a> 
 167   
 168      <a class='highslide' href='../images/thumbstrip13.jpg'
 169              onclick="return hs.expand(this, inPageOptions)" title="Cabins"> 
 170          <img src='../images/thumbstrip13.thumb.png' alt=''/></a> 
 171   
 172      <a class='highslide' href='../images/thumbstrip14.jpg'
 173              onclick="return hs.expand(this, inPageOptions)" title="Old stone cabins"> 
 174          <img src='../images/thumbstrip14.thumb.png' alt=''/></a> 
 175   
 176      <a class='highslide' href='../images/thumbstrip15.jpg'
 177              onclick="return hs.expand(this, inPageOptions)" title="A litte open water"> 
 178          <img src='../images/thumbstrip15.thumb.png' alt=''/></a> 
 179   
 180      <a class='highslide' href='../images/thumbstrip16.jpg'
 181              onclick="return hs.expand(this, inPageOptions)" title="Dipper"> 
 182          <img src='../images/thumbstrip16.thumb.png' alt=''/></a> 
 183   
 184      <a class='highslide' href='../images/thumbstrip17.jpg'
 185              onclick="return hs.expand(this, inPageOptions)" title="Dipper"> 
 186          <img src='../images/thumbstrip17.thumb.png' alt=''/></a> 
 187   
 188      <a class='highslide' href='../images/thumbstrip18.jpg'
 189              onclick="return hs.expand(this, inPageOptions)" title="Mountain"> 
 190          <img src='../images/thumbstrip18.thumb.png' alt='s'/></a> 
 191   
 192      <a class='highslide' href='../images/thumbstrip19.jpg'
 193              onclick="return hs.expand(this, inPageOptions)" title="Birch trees"> 
 194          <img src='../images/thumbstrip19.thumb.png' alt=''/></a> 
 195   
 196      <a class='highslide' href='../images/thumbstrip20.jpg'
 197              onclick="return hs.expand(this, inPageOptions)" title="Highland woods"> 
 198          <img src='../images/thumbstrip20.thumb.png' alt=''/></a> 
 199   
 200      <a class='highslide' href='../images/thumbstrip21.jpg'
 201              onclick="return hs.expand(this, inPageOptions)" title="Frozen lake"> 
 202          <img src='../images/thumbstrip21.thumb.png' alt=''/></a> 
 203   
 204      <a class='highslide' href='../images/thumbstrip22.jpg'
 205              onclick="return hs.expand(this, inPageOptions)" title="Spring in the mountains"> 
 206          <img src='../images/thumbstrip22.thumb.png' alt=''/></a> 
 207   
 208      <a class='highslide' href='../images/thumbstrip23.jpg'
 209              onclick="return hs.expand(this, inPageOptions)" title="Spring in the mountains"> 
 210          <img src='../images/thumbstrip23.thumb.png' alt=''/></a> 
 211   
 212      <a class='highslide' href='../images/thumbstrip24.jpg'
 213              onclick="return hs.expand(this, inPageOptions)" title="Fjord landscape"> 
 214          <img src='../images/thumbstrip24.thumb.png' alt=''/></a> 
 215   
 216  </div> 
 217   
 218  </div> 
 219   
 220  </body> 
 221  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

/sites/all/libraries/highslide/examples/ -> gallery-in-page.html (source)
