7iomka/basic.html

## basic.html
<!DOCTYPE html>
<html>
<head>
    <title>OpenSeadragon Basic 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" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css" />
    <style type="text/css">

    #content {
        width: 300px;
        height: 300px;
    }

    #navigatorWrapper {
        width: 100px;
        height: 100px;
    }

    #navigator {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .openseadragon {
        background-color: white;
        border: 10px solid black;
    }
    </style>
</head>
<body>
    <div>
        Simple demo page to show a default OpenSeadragon viewer.
    </div>
    <div id="details">
        Details:
    </div>
    <div id="content" class="openseadragon"></div>
    <div id="navigatorWrapper" class="openseadragon">
        <div id="navigator"></div>
    </div>
    <script type="text/javascript">
        $('#content').resizable();
        $('#navigatorWrapper').resizable();

        var viewer = OpenSeadragon({
            debugMode: true,
            id: "content",
            prefixUrl: "../../build/openseadragon/images/",
            tileSources: "../data/testpattern.dzi",
            minZoomImageRatio: 0.8,
            allowZoomToConstraintsOnResize: true,
            showNavigator: true,
            navigatorId: "navigator",
            // navigatorMinZoomImageRatio: 0.5 // controls how far the navigator can be zoomed out when resizing
        });

        (function(_viewer) {
            var viewer = _viewer,
                zoom,
                oldContainerSize,
                containerSize;

            function report() {
                var html = 'Details: ' +
                        'zoom: ' + zoom;

                if (containerSize) {
                    html +=
                        ', width: ' + containerSize.x +
                        ', height: ' + containerSize.y;
                }
                if (oldContainerSize) {
                    html += ', delta-w: ' + (containerSize.x - oldContainerSize.x) +
                    ', delta-h: ' + (containerSize.y - oldContainerSize.y);
                }
                $('#details').html(html);
            }

            viewer.addHandler('resize', function(e) {
                zoom = e.eventSource.viewport.getZoom();
                oldContainerSize = containerSize;
                containerSize = e.newContainerSize
                report();
            });

            viewer.addHandler('animation', function(e) {
                zoom = e.eventSource.viewport.getZoom();
                report();
            });
        })(viewer);

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>OpenSeadragon Basic 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" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css" />
	<style type="text/css">

	#content {
	width: 300px;
	height: 300px;
	}

	#navigatorWrapper {
	width: 100px;
	height: 100px;
	}

	#navigator {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	}

	.openseadragon {
	background-color: white;
	border: 10px solid black;
	}
	</style>
	</head>
	<body>
	<div>
	Simple demo page to show a default OpenSeadragon viewer.
	</div>
	<div id="details">
	Details:
	</div>
	<div id="content" class="openseadragon"></div>
	<div id="navigatorWrapper" class="openseadragon">
	<div id="navigator"></div>
	</div>
	<script type="text/javascript">
	$('#content').resizable();
	$('#navigatorWrapper').resizable();

	var viewer = OpenSeadragon({
	debugMode: true,
	id: "content",
	prefixUrl: "../../build/openseadragon/images/",
	tileSources: "../data/testpattern.dzi",
	minZoomImageRatio: 0.8,
	allowZoomToConstraintsOnResize: true,
	showNavigator: true,
	navigatorId: "navigator",
	// navigatorMinZoomImageRatio: 0.5 // controls how far the navigator can be zoomed out when resizing
	});

	(function(_viewer) {
	var viewer = _viewer,
	zoom,
	oldContainerSize,
	containerSize;

	function report() {
	var html = 'Details: ' +
	'zoom: ' + zoom;

	if (containerSize) {
	html +=
	', width: ' + containerSize.x +
	', height: ' + containerSize.y;
	}
	if (oldContainerSize) {
	html += ', delta-w: ' + (containerSize.x - oldContainerSize.x) +
	', delta-h: ' + (containerSize.y - oldContainerSize.y);
	}
	$('#details').html(html);
	}

	viewer.addHandler('resize', function(e) {
	zoom = e.eventSource.viewport.getZoom();
	oldContainerSize = containerSize;
	containerSize = e.newContainerSize
	report();
	});

	viewer.addHandler('animation', function(e) {
	zoom = e.eventSource.viewport.getZoom();
	report();
	});
	})(viewer);

	</script>
	</body>
	</html>