OpenSeaDragon

by gmdavis62

HTML

<div id="seadragon-viewer" style="width:100%; height:650px;"></div>
<script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>

JavaScript

var imagePrefix = 'http://image-processing-jpeg-proxy.cmh.pgtest.evinternal.net/jpeg?source=s3://evtech-us-east-2-pg-test-marianas-ux/IPTEST013/frame-extraction/results/images/d37fac97/0001/Cam02/00000058';


var viewer = OpenSeadragon({
  id: "seadragon-viewer",
  tileSources: [{
		type: 'legacy-image-pyramid',
		levels:[{
      url: imagePrefix+'.4.jp2',
      height: 1080,
      width:  2048
  	},{
    	url: imagePrefix+'.2.jp2',
      height: 2160,
      width:  4096
  	},{
			 url: imagePrefix+'.jp2',
       height: 4320,
       width:  8192   
		}]
  }],
  showNavigator: false,
  showSequenceControl: false,
  sequenceControlAnchor: false,
  showNavigationControl: true,
  showZoomControl: false,
  showHomeControl: false,
  showFullPageControl: true,
  panHorizontal: true,
  panVertical: true,
  constrainDuringPan: true,
  wrapHorizontal: false,
  wrapVertical: false,
  visibilityRatio: 0.95,
  defaultZoomLevel: 0,
  minZoomImageRatio: 0.98,
  maxZoomPixelRatio: 1,
  pixelsPerArrowPress:400,
  zoomPerScroll:1.3
  
});