stretchgz/index.html Secret

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="%%_HTMLStyle_%%">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>%%_Title_%%</title>
    <script type="text/xml" id="hdvxmlembed">
      %%_XML_%%
    </script>
    <style>
      body {
        background-color: #333;
      }

      html,
      body,
      #openseadragon1 {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body style="margin: 0; %%_BodyStyle_%%">
    <div id="openseadragon1"></div>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://openseadragon.github.io/openseadragon/openseadragon.js"></script> -->
    <script src="https://cdn.jsdelivr.net/combine/npm/jquery@3.5.1,npm/openseadragon@2.4.2"></script>
    <script>
      // Set up viewer size
      var viewerWidth = "100%";
      var viewerHeight = "100%";
      if (viewerWidth.search("%") == -1) {
        $("#openseadragon1")
          .width(viewerWidth + "px")
          .height(viewerHeight + "px");
      }

      // Set up DZI information
      var dziData = $("#hdvxmlembed").html().trim();
      dziData = $($.parseXML(dziData));
      url = dziData.find("imageset").attr("url");
      var dziFilesUrl = url.match(/(.*?)_files/g)[0] + "/";
      var dziBasename = url.split("/")[0].replace("_files", "");

      // This converts the XML into a DZI tile source specification object that OpenSeadragon understands.
      var tileSourceFromData = function (data, filesUrl) {
        $xml = data;
        var $image = $xml.find("imageset");
        var $size = $image;

        var dzi = {
          Image: {
            xmlns: "http://schemas.microsoft.com/deepzoom/2008",
            Url: filesUrl,
            Format: "jpg",
            Overlap: $image.attr("tileOverlap"),
            TileSize: $image.attr("tileWidth"),
            Size: {
              Height: $size.attr("height"),
              Width: $size.attr("width"),
            },
          },
        };
        return dzi;
      };

      // This creates the actual viewer.
      var viewer = OpenSeadragon({
        id: "openseadragon1",
        prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
        tileSources: tileSourceFromData(dziData, dziFilesUrl),
      });
    </script>
  </body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" style="%%_HTMLStyle_%%">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>%%_Title_%%</title>
	<script type="text/xml" id="hdvxmlembed">
	%%_XML_%%
	</script>
	<style>
	body {
	background-color: #333;
	}

	html,
	body,
	#openseadragon1 {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body style="margin: 0; %%_BodyStyle_%%">
	<div id="openseadragon1"></div>

	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://openseadragon.github.io/openseadragon/openseadragon.js"></script> -->
	<script src="https://cdn.jsdelivr.net/combine/npm/jquery@3.5.1,npm/openseadragon@2.4.2"></script>
	<script>
	// Set up viewer size
	var viewerWidth = "100%";
	var viewerHeight = "100%";
	if (viewerWidth.search("%") == -1) {
	$("#openseadragon1")
	.width(viewerWidth + "px")
	.height(viewerHeight + "px");
	}

	// Set up DZI information
	var dziData = $("#hdvxmlembed").html().trim();
	dziData = $($.parseXML(dziData));
	url = dziData.find("imageset").attr("url");
	var dziFilesUrl = url.match(/(.*?)_files/g)[0] + "/";
	var dziBasename = url.split("/")[0].replace("_files", "");

	// This converts the XML into a DZI tile source specification object that OpenSeadragon understands.
	var tileSourceFromData = function (data, filesUrl) {
	$xml = data;
	var $image = $xml.find("imageset");
	var $size = $image;

	var dzi = {
	Image: {
	xmlns: "http://schemas.microsoft.com/deepzoom/2008",
	Url: filesUrl,
	Format: "jpg",
	Overlap: $image.attr("tileOverlap"),
	TileSize: $image.attr("tileWidth"),
	Size: {
	Height: $size.attr("height"),
	Width: $size.attr("width"),
	},
	},
	};
	return dzi;
	};

	// This creates the actual viewer.
	var viewer = OpenSeadragon({
	id: "openseadragon1",
	prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
	tileSources: tileSourceFromData(dziData, dziFilesUrl),
	});
	</script>
	</body>
	</html>