PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/highslide/examples/gallery-controls-in-heading.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.wrapperClassName = 'controls-in-heading';
  27      hs.fadeInOut = true;
  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: false,
  37          overlayOptions: {
  38              opacity: 1,
  39              position: 'top right',
  40              hideOnMouseOut: false
  41          }
  42      });
  43  </script>
  44  
  45  </head>
  46  <body>
  47  
  48  <!--
  49      3) Put the thumbnails inside a div for styling
  50  -->
  51  <div class="highslide-gallery">
  52  <!--
  53      4) This is how you mark up the thumbnail image with an anchor tag around it.
  54      The anchor's href attribute defines the URL of the full-size image.
  55  -->
  56  <a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
  57      <img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
  58          title="Click to enlarge" />
  59  </a>
  60  
  61  <!--
  62      5 (optional). This is how you mark up the heading. The correct class name is important.
  63  -->
  64  
  65  <div class="highslide-heading">
  66      Heading for the first image.
  67  </div>
  68  
  69  
  70  <!-- Repetionion of the above -->
  71  <a href="../images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
  72      <img src="../images/gallery2.thumb.jpg" alt="Highslide JS"
  73          title="Click to enlarge" /></a>
  74  
  75  <div class="highslide-heading">
  76      Heading for the second image.
  77  </div>
  78  
  79  <a href="../images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
  80      <img src="../images/gallery3.thumb.jpg" alt="Highslide JS"
  81          title="Click to enlarge" /></a>
  82  
  83  <div class="highslide-heading">
  84      Heading for the third image.
  85  </div>
  86  
  87  </div>
  88  </body>
  89  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

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