jonnysp/pannorama

**MarkIII** · 21.03.2023, 10:13

Kennt sich jemand mit dieser Erweiterung aus?

Ich habe ein Pannorama inkl. Vorschaubild und Scene angelegt, in einem Artikel das Pannorama-Viewer Element eingefügt, aber auf der Webseite wird nichts angezeigt.
In den Entwicklertools wird mir folgendes angezeigt:

HTML-Code:

<main id="main">
    <div class="inside">
        <div class="mod_article block" id="article-503">
            <div class="ce_pannorama_viewer">
                <div id="panorama2981" class="pnlm-container" tabindex="0">
                    <div class="pnlm-ui">
                        <div class="pnlm-dragfix"></div>
                        <div class="pnlm-sprite pnlm-hot-spot-debug-indicator" style="display: block;"></div>
                        <div class="pnlm-panorama-info" style="display: none;">
                            <div class="pnlm-title-box"></div>
                            <div class="pnlm-author-box"></div>
                        </div>
                        <div class="pnlm-load-box">
                            <p>Lade...</p>
                            <div class="pnlm-lbox"><div class="pnlm-loading"></div></div>
                            <div class="pnlm-lbar"><div class="pnlm-lbar-fill"></div></div>
                            <p class="pnlm-lmsg"></p>
                        </div>
                        <div class="pnlm-error-msg pnlm-info-box"></div>
                        <div class="pnlm-interaction-msg pnlm-info-box"></div>
                        <div class="pnlm-controls-container">
                            <div class="pnlm-zoom-controls pnlm-controls" style="display: block;">
                                <div class="pnlm-zoom-in pnlm-sprite pnlm-control"></div>
                                <div class="pnlm-zoom-out pnlm-sprite pnlm-control"></div>
                            </div>
                            <div class="pnlm-fullscreen-toggle-button pnlm-sprite pnlm-fullscreen-toggle-button-inactive pnlm-controls pnlm-control" style="display: block;"></div>
                        </div>
                        <button class="pnlm-load-button">
                            <div>
                                <p>
                                    Klicke hier, um<br />
                                    Panorama<br />
                                    zu laden
                                </p>
                            </div>
                        </button>
                        <div class="pnlm-compass pnlm-controls pnlm-control"></div>
                    </div>
                    <div class="pnlm-render-container"><div class="pnlm-preview-img" style="background-image: url('https://testseite.saunabau-passau.de/files/wp-content/gallery/397/Zirbensauna-5.jpg');"></div></div>
                </div>
                <script>
                    pannellum.viewer("panorama2981", {
                        default: {
                            strings: {
                                loadButtonLabel: "Klicke hier, um\nPanorama\nzu laden",
                                loadingLabel: "Lade...",
                                bylineLabel: "von %s",
                                noPanoramaError: "Es wurde kein Panorama angegeben.",
                                fileAccessError: "Die Datei %s konnte nicht ge\u00f6ffnet werden.",
                                malformedURLError: "Da stimmt etwas nicht mit der Panorama URL.",
                                iOS8WebGLError: "Wegen der fehlerhaften WebGL Implementierung von iOS8 funktionieren nur progressiv enkodierte JPEGs auf deinem Ger\u00e4t (dieses Panorama benutzt Standard Enkodierung).",
                                genericWebGLError: "Dein Browser hat nicht die n\u00f6tige WebGL Unterst\u00fctzung, um das Panorama anzeigen zu k\u00f6nnen.",
                                textureSizeError:
                                    "Dieses Panorama ist zu gro\u00df f\u00fcr dein Ger\u00e4t! Das Panorama ist %spx breit, dein Ger\u00e4t unterst\u00fctzt allerdings nur eine maximal Gr\u00f6\u00dfe von %spx. Versuche ein anderes Ger\u00e4t. (Falls du der Author bist, versuche, das Bild herunterzuskalieren.)",
                                unknownError: "Unbekannter Fehler. Schaue in die Entwicklerkonsole.",
                                twoTouchActivate: "Verwende zwei Finger zusammen, um das Panorama zu bewegen.",
                                twoTouchXActivate: "Verwende zwei Finger zusammen, um das Panorama waagerecht zu bewegen.",
                                twoTouchYActivate: "Verwende zwei Finger zusammen, um das Panorama senkrecht zu bewegen.",
                                ctrlZoomActivate: "Verwende %s + Mausrad, um im Panorama zu zoomen.",
                            },
                            firstScene: "1",
                            sceneFadeDuration: 2000,
                            autoLoad: false,
                            preview: "https:\/\/testseite.saunabau-passau.de\/files\/wp-content\/gallery\/397\/Zirbensauna-5.jpg",
                            loadButtonLabel: "3D-Panorama laden",
                            hotSpotDebug: true,
                        },
                        scenes: {
                            "1": {
                                pitch: -2.795970247768979,
                                yaw: -87.26898914898868,
                                hfov: 120,
                                type: "equirectangular",
                                panorama: "https:\/\/testseite.saunabau-passau.de\/files\/wp-content\/uploads\/2021\/09\/3D-Zirbensauna-innen.jpg",
                                showControls: true,
                                showZoomCtrl: true,
                                showFullscreenCtrl: true,
                                compass: true,
                                northOffset: 0,
                                keyboardZoom: true,
                                mouseZoom: "true",
                                minHfov: 50,
                                maxHfov: 120,
                                doubleClickZoom: true,
                                draggable: true,
                            },
                        },
                    });
                </script>
            </div>
        </div>
    </div>
</main>

Es gibt auch keine Fehlermeldungen....

**zonky** · 21.03.2023, 10:55

Gibts ne URL?

Ist der Pannellum-Viewer auch richtig eingebunden?

**MarkIII** · 21.03.2023, 11:01

https://testseite.saunabau-passau.de...ansichten.html

Zitat von zonky

Ist der Pannellum-Viewer auch richtig eingebunden?

Muss ich außer der Installation über den Manager sonst noch was machen? Oder meinst Du im Artikel?

**zonky** · 21.03.2023, 11:08

ahh... wuste nicht. dass das eine Erweiterung ist...

da sieht soweit alles Paletti aus - nimm mal Dein Masonry raus

Konsole: $masonry.masonry is not a function ...