PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/highslide/examples/gallery-in-box.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-full.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.dimmingOpacity = 0.75;
  28  
  29      // define the restraining box
  30      hs.useBox = true;
  31      hs.width = 640;
  32      hs.height = 480;
  33  
  34      // Add the controlbar
  35      hs.addSlideshow({
  36          //slideshowGroup: 'group1',
  37          interval: 5000,
  38          repeat: false,
  39          useControls: true,
  40          fixedControls: 'fit',
  41          overlayOptions: {
  42              opacity: 1,
  43              position: 'bottom center',
  44              hideOnMouseOut: true
  45          }
  46      });
  47  </script>
  48  
  49  </head>
  50  
  51  <body>
  52  
  53  <!--
  54      3) Put the thumbnails inside a div for styling
  55  -->
  56  
  57  <div class="highslide-gallery">
  58  <!--
  59      4) This is how you mark up the thumbnail image with an anchor tag around it.
  60      The anchor's href attribute defines the URL of the full-size image.
  61  -->
  62  <a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
  63      <img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
  64          title="Click to enlarge" />
  65  </a>
  66  
  67  <!--
  68      5 (optional). This is how you mark up the caption. The correct class name is important.
  69  -->
  70  
  71  <div class="highslide-caption">
  72      Caption for the first image. This caption can be styled using CSS.
  73  </div>
  74  
  75  
  76  <!-- Repetionion of the above -->
  77  <a href="../images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
  78      <img src="../images/gallery2.thumb.jpg" alt="Highslide JS"
  79          title="Click to enlarge" /></a>
  80  
  81  <div class="highslide-caption">
  82      Caption for the second image.
  83  </div>
  84  
  85  <a href="../images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
  86      <img src="../images/gallery3.thumb.jpg" alt="Highslide JS"
  87          title="Click to enlarge" /></a>
  88  
  89  <div class="highslide-caption">
  90      Caption for the third image.
  91  </div>
  92  
  93  </div>
  94  </body>
  95  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

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