InfoBox mit wichtigen Daten
Willkommen bei Test-Website
Ihr findet hier Ideen und Experimente rund um mozilo; zum Anschauen, Kommentieren und evtl. Nachnutzen.Im Vordergrund stehen Fragen zu:
- Funktionserweiterungen
- Anpassung an PHP 8.x
- Barrierefreiheit
Besucht auch das mozilo FORUM. Dort findet die Diskussion statt.
Aus einer Anfrage - Panoramabilder
1. Panoramabild bei Google finden (hier Galeria Roter Turm, Chemnitz)
- dafür erfolgt jedesmal Zugriff auf Google
2. iFrame von Google kopieren und über Editor mit </> einbinden; erzeugt [HTML| ... ]
- für eigene Fotos muß man den iFrame erzeugen (kostenlos, Anbieter im Web)
Code für nachfolgendes Bild:
[html|
<iframe src="https://www.google.com/maps/embed?pb=!4v1777030505926!6m8!1m7!1sCAoSF0NJSE0wb2dLRUlDQWdJREN2YUd5clFF!2m2!1d50.83454076470091!2d12.92165041089104!3f319.4776065290198!4f18.967690451360326!5f0.7820865974627469" style="border:0; width:100%;" height="450" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>]
- dafür erfolgt jedesmal Zugriff auf Google
2. iFrame von Google kopieren und über Editor mit </> einbinden; erzeugt [HTML| ... ]
- für eigene Fotos muß man den iFrame erzeugen (kostenlos, Anbieter im Web)
Code für nachfolgendes Bild:
[html|
<iframe src="https://www.google.com/maps/embed?pb=!4v1777030505926!6m8!1m7!1sCAoSF0NJSE0wb2dLRUlDQWdJREN2YUd5clFF!2m2!1d50.83454076470091!2d12.92165041089104!3f319.4776065290198!4f18.967690451360326!5f0.7820865974627469" style="border:0; width:100%;" height="450" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>]
1. Kleine Erweiterung im Template, z.B. direkt vor </head>
...
<!-- JS 360 Grad Viewer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.css">
<script src="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.js"></script>
</head>
Hier wird Bild vom eigenen Server eingebunden (Bereich Dateien der jeweiligen Kategorie; hier im Beispiel Home)
2. Benutzerelement in Einstellungen anlegen, z.B wie folgt (hier mit Angaben zu Breite und Höhe)
bild_360 = <div id="panorama" style="width:100%; height:500px;"></div><script>pannellum.viewer('panorama', {type: 'equirectangular', panorama: '{VALUE}', autoLoad: true});</script>
3. Einbau in Editor
[bild_360|/kategorien/Home/dateien/bilddatei]
...
<!-- JS 360 Grad Viewer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.css">
<script src="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.js"></script>
</head>
Hier wird Bild vom eigenen Server eingebunden (Bereich Dateien der jeweiligen Kategorie; hier im Beispiel Home)
2. Benutzerelement in Einstellungen anlegen, z.B wie folgt (hier mit Angaben zu Breite und Höhe)
bild_360 = <div id="panorama" style="width:100%; height:500px;"></div><script>pannellum.viewer('panorama', {type: 'equirectangular', panorama: '{VALUE}', autoLoad: true});</script>
3. Einbau in Editor
[bild_360|/kategorien/Home/dateien/bilddatei]