Tutorial: Syncing viewers

    <!-- include PMA.UI script & css -->
    <script src="pma.ui.js" type="text/javascript"></script>
    <link href="pma.ui.css" type="text/css" rel="stylesheet">

    <script type="text/javascript">
        var context = new PMA.UI.Components.Context({ caller: "PMA.UI.Demo" });
        new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: username, password: password }]);

        var slideLoader1 = new PMA.UI.Components.SlideLoader(context, {
            element: "#viewer1",
            overview: { collapsed: true },
            channels: { collapsed: false },
            scaleLine: true,
            annotations: { visible: true, labels: true },
            digitalZoomLevels: 2,
            loadingBar: true,
            highQuality: true,
            barcode: { collapsed: true },
            theme: "modern"
        });

        var slideLoader2 = new PMA.UI.Components.SlideLoader(context, {
            element: "#viewer2",
            overview: { collapsed: true },
            channels: { collapsed: false },
            scaleLine: true,
            annotations: { visible: true, labels: true },
            digitalZoomLevels: 2,
            loadingBar: true,
            highQuality: true,
            barcode: { collapsed: true },
            theme: "modern"
        });

        var sync = new PMA.UI.Components.SyncView([slideLoader1, slideLoader2]);
        slideLoader1.load(serverUrl, slide1, function () {
            slideLoader2.load(serverUrl, slide2, function () {
                sync.enableSync();
            });
        });
    </script>

Result: