<html> <head> <title>OpenSeadragon Navigator in a JQuery UI Dialog Demo</title> <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script> <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script> <script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script> <link rel="stylesheet" type="text/css" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css"/> <style type="text/css"> .openseadragon { width: 800px; height: 600px; border: 1px solid black; color: #333; /* text color for messages */ background-color: black; } </style> </head> <body> <div> Simple demo page to show how to put the navigator in a moveable JQuery UI dialog. </div> <div id="contentDiv" class="openseadragon"></div> <div id="navigatorDialog"> <div id="navigatorDiv"></div> </div> <script type="text/javascript"> $('#navigatorDialog').dialog(); var viewer = OpenSeadragon({ id:"contentDiv", navigatorId: "navigatorDiv", prefixUrl:"../../build/openseadragon/images/", tileSources:{ Image:{ xmlns:"http://schemas.microsoft.com/deepzoom/2008", Url:"../data/testpattern_files/", Format:"jpg", Overlap:"2", TileSize:"256", Size:{ Height:"1000", Width:"1000" } } } }); </script> </body> </html>