dashboard
Version:
Create dashboards with gadgets on node.js
135 lines (114 loc) • 4.02 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS</title>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
</head>
<body>
<!--
3) Put the thumbnails inside a div for styling
-->
<div class="highslide-gallery">
<!--
4) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
-->
<a id="thumb1" href="../images/thumbstrip01.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )">
<img src="../images/thumbstrip01.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
Click the thumbnail to open the first gallery.
<!--
5 (optional). This is how you mark up the caption. The correct class name is important.
-->
<div class="highslide-caption">
Caption for the first image. This caption can be styled using CSS.
</div>
<!--
6) Put the subsequent thumbnails in a hidden container. The thumbnailId parameter ensures
these thumbnails zoom back out to the right thumbnail when closed.
-->
<div class="hidden-container">
<a href="../images/thumbstrip02.jpg" class="highslide"
onclick="return hs.expand(this, { thumbnailId: 'thumb1', slideshowGroup: 1 })"></a>
<div class="highslide-caption">
Caption for the second image in the first group.
</div>
<a href="../images/thumbstrip03.jpg" class="highslide"
onclick="return hs.expand(this, { thumbnailId: 'thumb1', slideshowGroup: 1 })"></a>
<div class="highslide-caption">
Caption for the third image in the first group.
</div>
</div>
</div>
<!--
7) The second gallery. Notice the different slideshowGroup and thumbnailId
-->
<div class="highslide-gallery">
<!--
4) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
-->
<a id="thumb2" href="../images/thumbstrip04.jpg" class="highslide"
onclick="return hs.expand(this, { slideshowGroup: 2} )">
<img src="../images/thumbstrip04.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
Click the thumbnail to open the second gallery.
<!--
5 (optional). This is how you mark up the caption. The correct class name is important.
-->
<div class="highslide-caption">
Caption for the first image in the second group. This caption can be styled using CSS.
</div>
<!--
6) Put the subsequent thumbnails in a hidden container. The thumbnailId parameter ensures
these thumbnails zoom back out to the right thumbnail when closed.
-->
<div class="hidden-container">
<a href="../images/thumbstrip05.jpg" class="highslide"
onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 2 })"></a>
<div class="highslide-caption">
Caption for the second image in the second group.
</div>
<a href="../images/thumbstrip06.jpg" class="highslide"
onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 2 })"></a>
<div class="highslide-caption">
Caption for the third image in the second group.
</div>
</div>
</div>
</body>
</html>