HE.html

<meta charset="utf-8"/>
<div id="openseadragon1" style="width: 100%; height: 95%;"></div>
<script src="./openseadragon/openseadragon.min.js"></script>
<script src="openseadragon/openseadragon-scalebar.js"></script> <!-- for scalebar -->
<script type="text/javascript">
 var viewer = OpenSeadragon({
 id: 'openseadragon1',
 prefixUrl : './openseadragon/images/',
 showHomeControl : false, // optional
 showRotationControl : true,  // optional
 showNavigator : true,  // optional
 showFlipControl: true,  // optional
 navigatorBackground: 'rgb(240, 240, 240)',  // optional
 tileSources: {
 Image: {
Url: './HE_files/', // name of image folder
TileSize: '254', // see .dzi file
Overlap: '1', // see .dzi file
Format: 'jpeg', // see .dzi file
ServerFormat: 'Default', // optional
xmlns: 'http://schemas.microsoft.com/deepzoom/2009', // see .dzi file
Size: {
 Width: '51792', // see .dzi file
 Height: '30580' // see .dzi file
 } 
 }}});
// for scalebar
viewer.scalebar({ 
minWidth: '100px', 
pixelsPerMeter : '1.98255e+06', 
fontFamily : 'Arial', 
backgroundColor : 'rgba(255, 255, 255, 0.5)', 
fontSize : 'small', 
barThickness : '2', 
xOffset : '10', 
yOffset : '10'  
});
</script>