Untitled

<!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>