HE-deneme.html

<html> <!-- do not use <!DOCTYPE html> -->

<head>
    <title>HE deneme</title>

    <script src="./openseadragon/openseadragon.min.js"></script>

    <!-- OpenSeadragon annotations -->
    <script src="./openseadragon-annotations/dist/openseadragon-annotations.js"></script>

    <style>
        .loading {
            position: absolute;
            left: 50px;
            top: 50px;
            font-size: 30px;
            z-index: 10;
        }
    </style>

</head>

<body>

    <div id="openseadragon1" style="width: 100%; height: 95%;"></div>
    <div class="loading">LOADING!</div>


    <script type="text/javascript">
        var viewer = OpenSeadragon({
            id: 'openseadragon1',
            //        prefixUrl: 'https://images.patolojiatlasi.com/openseadragon/images/',
            prefixUrl: './openseadragon/images/',


            tileSources: {
                Image: {
                    Url: './HE2_files/', // name of image folder
                    TileSize: '254', // see .dzi file
                    Overlap: '1', // see .dzi file
                    Format: 'jpeg', // see .dzi file
                    ServerFormat: 'Default', // optional
                    xmlns: 'http://schemas.microsoft.com/deepzoom/2008', // see .dzi file
                    Size: {
                        Width: '13198', // see .dzi file
                        Height: '11685' // see .dzi file
                    }
                }
            }


        });

        viewer.initializeAnnotations();


        function areAllFullyLoaded() {
            var tiledImage;
            var count = viewer.world.getItemCount();
            for (var i = 0; i < count; i++) {
                tiledImage = viewer.world.getItemAt(i);
                if (!tiledImage.getFullyLoaded()) {
                    return false;
                }
            }
            return true;
        }

        var isFullyLoaded = false;

        function updateLoadingIndicator() {
            // Note that this function gets called every time isFullyLoaded changes, which it will do as you 
            // zoom and pan around. All we care about is the initial load, though, so we are just hiding the 
            // loading indicator and not showing it again. 
            if (isFullyLoaded) {
                document.querySelector('.loading').style.display = 'none';
            }
        }

        viewer.world.addHandler('add-item', function (event) {
            var tiledImage = event.item;
            tiledImage.addHandler('fully-loaded-change', function () {
                var newFullyLoaded = areAllFullyLoaded();
                if (newFullyLoaded !== isFullyLoaded) {
                    isFullyLoaded = newFullyLoaded;
                    updateLoadingIndicator();
                }
            });
        });


    </script>
</body>

</html>