dashboard
Version:
Create dashboards with gadgets on node.js
214 lines (176 loc) • 6.43 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<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-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
Add the slideshow and do some adaptations to this example.
-->
<script type="text/javascript">
//<![CDATA[
hs.graphicsDir = '../highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
overlayOptions: {
position: 'bottom right',
offsetY: 50
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});
// Options for the in-page items
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: false,
wrapperClassName: 'in-page controls-in-heading',
useBox: true,
width: 600,
height: 400,
targetX: 'gallery-area 10px',
targetY: 'gallery-area',
captionEval: 'this.thumb.alt',
numberPosition: 'caption'
}
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
document.getElementById('thumb1').onclick();
});
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
if (/in-page/.test(this.wrapper.className)) return hs.next();
}
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
var i, exp;
hs.getPageSize();
for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;
// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
// calculate new popup position
x.pos = x.tpos - x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos - y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);
// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});
//]]>
</script>
<!--
3) Modify some of the styles
-->
<style type="text/css">
.highslide-image {
border: 1px solid black;
}
.highslide-controls {
width: 90px ;
}
.highslide-controls .highslide-close {
display: none;
}
.highslide-caption {
padding: .5em 0;
}
</style>
</head>
<body>
<!--
4) Put all the thumbnails inside a hidden div where Highslide can index them to
create the slideshow.
-->
<div class="hidden-container">
<!--
5) This is how you mark up the thumbnail images with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image. Given the captionEval
option is set to 'this.a.title', the caption is grabbed from the title attribute of
the anchor.
-->
<a id="thumb1" class='highslide' href='../images/thumbstrip11.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip11.thumb.png' alt='Two cabins'/></a>
<a class='highslide' href='../images/thumbstrip12.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip12.thumb.png' alt='Patterns in the snow'/></a>
<a class='highslide' href='../images/thumbstrip13.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip13.thumb.png' alt='Cabins'/></a>
<a class='highslide' href='../images/thumbstrip14.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip14.thumb.png' alt='Old stone cabins'/></a>
<a class='highslide' href='../images/thumbstrip15.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip15.thumb.png' alt='A litte open water'/></a>
<a class='highslide' href='../images/thumbstrip16.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip16.thumb.png' alt='Dipper'/></a>
<a class='highslide' href='../images/thumbstrip17.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip17.thumb.png' alt='Dipper'/></a>
<a class='highslide' href='../images/thumbstrip18.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip18.thumb.png' alt='Mountains'/></a>
<a class='highslide' href='../images/thumbstrip19.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip19.thumb.png' alt='Birch trees'/></a>
<a class='highslide' href='../images/thumbstrip20.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip20.thumb.png' alt='Highland woods'/></a>
<a class='highslide' href='../images/thumbstrip21.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip21.thumb.png' alt='Frozen lake'/></a>
<a class='highslide' href='../images/thumbstrip22.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip22.thumb.png' alt='Spring in the mountains'/></a>
<a class='highslide' href='../images/thumbstrip23.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip23.thumb.png' alt='Spring in the mountains'/></a>
<a class='highslide' href='../images/thumbstrip24.jpg'
onclick="return hs.expand(this, inPageOptions)">
<img src='../images/thumbstrip24.thumb.png' alt='Fjord landscape'/></a>
</div>
<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"></div>
</body>
</html>