| [ Index ] |
PHP Cross Reference of Drupal 6 (yi-drupal) |
[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.dimmingOpacity = 0.75; 28 29 // Add the controlbar 30 hs.addSlideshow({ 31 //slideshowGroup: 'group1', 32 interval: 5000, 33 repeat: false, 34 useControls: true, 35 fixedControls: 'fit', 36 overlayOptions: { 37 opacity: 0.75, 38 position: 'bottom center', 39 hideOnMouseOut: true 40 } 41 }); 42 </script> 43 44 </head> 45 46 <body> 47 48 <!-- 49 3) Put the thumbnails inside a div for styling 50 --> 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 href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)"> 58 <img src="../images/gallery1.thumb.jpg" alt="Highslide JS" 59 title="Click to enlarge" /> 60 </a> 61 62 <!-- 63 5 (optional). This is how you mark up the caption. The correct class name is important. 64 --> 65 66 <div class="highslide-caption"> 67 Caption for the first image. This caption can be styled using CSS. 68 </div> 69 70 71 <!-- Repetionion of the above --> 72 <a href="../images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)"> 73 <img src="../images/gallery2.thumb.jpg" alt="Highslide JS" 74 title="Click to enlarge" /></a> 75 76 <div class="highslide-caption"> 77 Caption for the second image. 78 </div> 79 80 <a href="../images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)"> 81 <img src="../images/gallery3.thumb.jpg" alt="Highslide JS" 82 title="Click to enlarge" /></a> 83 84 <div class="highslide-caption"> 85 Caption for the third image. 86 </div> 87 88 </div> 89 </body> 90 </html>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Mon Jul 9 18:01:44 2012 | Cross-referenced by PHPXref 0.7 |