Admin: Die Seite wurde neu angelegt: „Hauptseite > Schwarzatal.org Diese Seite beschreibt das Gadget '''Pano360''', mit dem sich 360-Grad-Panoramen (Kugelpanoramen) direkt in Wiki-Seiten einbetten lassen. Die Panoramen lassen sich mit Maus oder Finger drehen, neigen und zoomen und können im Vollbild angezeigt werden. Technische Grundlage ist die freie JavaScript-Bibliothek [https://pannellum.org/ Pannellum] (MIT-Lizenz), die '''lokal''' auf dem Server ge…“

2026-07-10T06:23:11Z

Die Seite wurde neu angelegt: „Hauptseite > Schwarzatal.org Diese Seite beschreibt das Gadget '''Pano360''', mit dem sich 360-Grad-Panoramen (Kugelpanoramen) direkt in Wiki-Seiten einbetten lassen. Die Panoramen lassen sich mit Maus oder Finger drehen, neigen und zoomen und können im Vollbild angezeigt werden. Technische Grundlage ist die freie JavaScript-Bibliothek [https://pannellum.org/ Pannellum] (MIT-Lizenz), die '''lokal''' auf dem Server ge…“

Neue Seite

[[Hauptseite]] > [[Hauptseite#Schwarzatal.org|Schwarzatal.org]]

Diese Seite beschreibt das Gadget '''Pano360''', mit dem sich 360-Grad-Panoramen
(Kugelpanoramen) direkt in Wiki-Seiten einbetten lassen. Die Panoramen lassen sich
mit Maus oder Finger drehen, neigen und zoomen und können im Vollbild angezeigt
werden.

Technische Grundlage ist die freie JavaScript-Bibliothek
[https://pannellum.org/ Pannellum] (MIT-Lizenz), die '''lokal''' auf dem Server
gehostet wird. Es werden keine externen Dienste eingebunden.

== Schnellstart ==

Ein hochgeladenes Panoramabild einbinden:

<pre>
<div class="pano360" data-src="Datei:Beispiel Panorama.jpg">
360°-Panorama (benötigt JavaScript)
</div>
</pre>

Der Text im <code><nowiki><div></nowiki></code> ist ein Ersatztext, der nur
angezeigt wird, falls JavaScript deaktiviert ist oder das Gadget nicht lädt.

== Voraussetzungen an das Bild ==

Das Gadget zeigt ''equirektangulare'' Panoramen an – das Standardformat jeder
360°-Kamera und der meisten Panorama-Apps. Zwei Dinge müssen stimmen:

* '''Seitenverhältnis exakt 2:1''' (z.B. 8192 × 4096 oder 4096 × 2048 Pixel).
Bilder mit anderem Verhältnis werden verzerrt dargestellt.
* '''Breite nicht zu groß wählen.''' Für zuverlässige Darstellung auch auf
Tablets und Smartphones sollte die Bildbreite möglichst bei ca. 4096 Pixeln
liegen. Größere Bilder (8192 px) funktionieren auf den meisten Geräten, können
auf älteren Mobilgeräten aber schwarz bleiben (Grenze der Grafik-Textur).

Zum Hochladen [[Spezial:Hochladen]] verwenden und auf der Dateibeschreibungsseite
Quelle und Lizenz angeben. Sehr große Dateien scheitern eventuell an den
Upload-Grenzen des Servers – dann Bild verkleinern.

== Alle Optionen (data-Attribute) ==

Gesteuert wird das Panorama über <code>data-</code>-Attribute am
<code><nowiki><div></nowiki></code>:

{| class="wikitable"
! Attribut !! Pflicht !! Bedeutung
|-
| <code>data-src</code> || '''ja''' || Bildquelle. Entweder ein Wiki-Dateiname (<code>Datei:X.jpg</code>, <code>File:X.jpg</code> oder <code>X.jpg</code>) oder eine vollständige URL bzw. ein absoluter Pfad.
|-
| <code>data-height</code> || nein || Höhe der Anzeige in Pixeln. Standard: 400 (per CSS).
|-
| <code>data-yaw</code> || nein || Horizontale Start-Blickrichtung in Grad (−180 bis 180).
|-
| <code>data-pitch</code> || nein || Vertikale Start-Blickrichtung in Grad (−90 bis 90).
|-
| <code>data-hfov</code> || nein || Start-Blickwinkel (Zoom) in Grad. Kleiner = näher herangezoomt. Standard 100.
|-
| <code>data-autorotate</code> || nein || Automatische Drehung in Grad pro Sekunde, z.B. <code>2</code>. Negativer Wert dreht andersherum.
|-
| <code>data-preview</code> || nein || Vorschaubild, das während des Ladens angezeigt wird (Dateiname oder URL).
|-
| <code>data-title</code> || nein || Titel, der im Viewer eingeblendet wird.
|-
| <code>data-author</code> || nein || Urheber, der im Viewer eingeblendet wird.
|-
| <code>data-compass</code> || nein || <code>1</code> blendet einen Kompass ein.
|-
| <code>data-north</code> || nein || Nordausrichtung in Grad (für den Kompass): in welche Blickrichtung Norden liegt.
|}

== Beispiele ==

Mit fester Höhe, Titel und langsamer Selbstdrehung:

<pre>
<div class="pano360" data-src="Datei:Gipfel Schwarzakopf.jpg"
data-height="450" data-title="Gipfel Schwarzakopf"
data-author="Max Mustermann" data-autorotate="2">
360°-Panorama
</div>
</pre>

Mit definierter Startblickrichtung (Blick nach Südwesten, leicht nach unten) und
Kompass:

<pre>
<div class="pano360" data-src="Datei:Aussicht.jpg"
data-yaw="-135" data-pitch="-10" data-compass="1" data-north="0">
360°-Panorama
</div>
</pre>

Bild von einer externen Adresse statt aus dem Wiki:

<pre>
<div class="pano360" data-src="https://example.org/pano/berg.jpg">
360°-Panorama
</div>
</pre>

== Installation ==

Das Gadget besteht aus vier Bausteinen. Nötig sind FTP-Zugang zum Server und
Administrationsrechte im Wiki.

=== 1. Pannellum-Bibliothek hochladen ===

Das aktuelle Release '''Pannellum 2.5.6''' von
[https://github.com/mpetroff/pannellum/releases GitHub] herunterladen und aus dem
Ordner <code>build/</code> zwei Dateien per FTP ablegen:

<pre>
<Wiki-Wurzel>/resources/lib/pannellum/pannellum.js
<Wiki-Wurzel>/resources/lib/pannellum/pannellum.css
</pre>

<code><Wiki-Wurzel></code> ist das Verzeichnis, in dem auch <code>index.php</code>
liegt. Zur Kontrolle die JS-Datei direkt im Browser aufrufen – es muss
JavaScript-Quelltext erscheinen, kein 404-Fehler.

=== 2. Gadget-Code anlegen ===

Den JavaScript-Code auf der Seite <code>MediaWiki:Gadget-Pano360.js</code>
speichern (der vollständige, aktuelle Code liegt dort) und die zugehörige
Gestaltung auf <code>MediaWiki:Gadget-Pano360.css</code>:

<pre>
.pano360 {
width: 100%;
height: 400px; /* Standardhöhe, per data-height überschreibbar */
margin: 0.5em 0;
border: 1px solid #a2a9b1;
border-radius: 2px;
background: #f8f9fa;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #54595d;
overflow: hidden;
}
</pre>

=== 3. Gadget registrieren ===

In <code>[[MediaWiki:Gadgets-definition]]</code> diese Zeile ergänzen:

<pre>
* Pano360[ResourceLoader|default|dependencies=mediawiki.util]|Pano360.js|Pano360.css
</pre>

<code>default</code> bedeutet: für alle Leserinnen und Leser aktiv, auch ohne
Anmeldung. Die Abhängigkeit <code>mediawiki.util</code> braucht das Gadget zum
Auflösen der Bild-Adressen.

=== 4. Panoramabild hochladen ===

Ein equirektangulares Bild (Seitenverhältnis 2:1) über [[Spezial:Hochladen]]
hochladen. Danach wie oben per <code><nowiki><div class="pano360"></nowiki></code>
einbinden.

== So funktioniert es ==

Beim Laden einer Seite sucht das Gadget nach Elementen mit der Klasse
<code>pano360</code>. Findet es welche, lädt es Pannellum genau einmal aus
<code>/resources/lib/pannellum/</code> nach und startet für jeden Container einen
Viewer. Die Bildquelle wird so aufgelöst: Beginnt <code>data-src</code> mit
<code>http</code> oder <code>/</code>, wird sie unverändert als Adresse verwendet;
andernfalls gilt der Wert als Wiki-Dateiname, der über
<code>Spezial:Weiterleitung/file/…</code> zur Originaldatei führt. Die Panoramen
laden sofort beim Seitenaufruf.

== Auf anderen Wikis nachbauen ==

Das Gadget hat außer Pannellum '''keine''' weiteren Abhängigkeiten (kein Three.js
o.ä.), was den Nachbau einfach macht. Nötig ist:

# Die Erweiterung [https://www.mediawiki.org/wiki/Extension:Gadgets/de Gadgets] muss aktiviert sein.
# Die zwei Pannellum-Dateien nach <code>/resources/lib/pannellum/</code> hochladen (Schritt 1). Liegt das Ziel-Wiki in einem Unterverzeichnis, ist das kein Problem – das Gadget setzt den Pfad automatisch relativ zur jeweiligen Installation zusammen.
# Den Inhalt von <code>MediaWiki:Gadget-Pano360.js</code> und <code>MediaWiki:Gadget-Pano360.css</code> in die gleichnamigen Seiten des Ziel-Wikis kopieren.
# Die Registrierungszeile in <code>MediaWiki:Gadgets-definition</code> eintragen (Schritt 3).

Ein anderer Speicherort für die Bibliothek lässt sich im Gadget-Code oben in der
Variablen <code>LIB_PATH</code> anpassen.

== Fehlersuche ==

Wird kein Panorama angezeigt, hilft die Browser-Konsole (in Firefox: Menü →
Weitere Werkzeuge → Web-Entwicklerwerkzeuge → Konsole) und diese Reihenfolge:

* '''Lädt die Bibliothek?''' Die Adresse <code>…/resources/lib/pannellum/pannellum.js</code> direkt im Browser öffnen. Erscheint ein 404, liegt die Datei am falschen Ort.
* '''Lädt das Bild?''' Die Adresse <code>…/index.php?title=Special:Redirect/file/<Dateiname></code> direkt öffnen. Erscheint das Bild nicht, stimmt der Dateiname in <code>data-src</code> nicht.
* '''Bild verzerrt?''' Das Bild ist nicht im Verhältnis 2:1.
* '''Auf dem Handy schwarz, am PC nicht?''' Das Bild ist für das Gerät zu groß – Breite reduzieren (siehe „Voraussetzungen an das Bild").
* '''Meldung „Viewer konnte nicht geladen werden"?''' Die Bibliothek wurde nicht gefunden – Pfad aus Schritt 1 prüfen.

== Lizenz ==

Die Bibliothek Pannellum steht unter der [https://opensource.org/licenses/MIT MIT-Lizenz].
Für die eingebundenen Panoramabilder gilt jeweils die auf ihrer
Dateibeschreibungsseite angegebene Lizenz.

[[Kategorie:Hilfe]]

Pano360 - Versionsgeschichte