Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Panoramabilder auf der Webseite

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Vorschau: Budapest - Blick über die Donau zum Parlament

Klick in die Vorschau für ein scrollbares Panorama

Panorama: Budapest - Blick über die Donau zum Parlament

Hinweis:
Tippen ins Panorama deaktiviert den Bewegungssensor und startet bzw. stoppt Autoscroll. Natürlich kann nach wie vor mittels Wischen gescrollt werden.

Hinweis:
Mauszeiger ins Panorama startet Autoscroll, Klicken stoppt / startet Autoscroll. Manuell Scrollen mit Maus, Touchpad, oder mit den den Pfeiltasten rechts / links auf der Tastatur.

Panoramafotos kann man heute mit jedem Smartphone aufnehmen. Wenn man so ein Panorama aber auf einer Webseite anbieten will, dann kommt man schnell an Grenzen; Man will einfach wischen / scrollen.
Nichts einfacher als das. Kein externer Dienst, nichts installieren, kein aufwendiges Script, nur eine einfache CSS-Anweisung; den Rest erledigt der Browser. Jeder Browser! Ohne Wenn und Aber, und vor allem ohne Ruckeln.

Das HTML

<div id="img_container"> <img src="pfad_zum/bild.jpg" alt="Alternativtext"> </div>

Das CSS

#img_container { overflow: auto; }

Das ist tatsächlich alles, was es braucht!

Die zusätzlichen Features dieser Demo sind auch kein Hexenwerk. Die ständig sichtbare Scrollbar sowie das Icon mit den zwei Pfeilen weisen darauf hin, dass es hier etwas zum Scrollen / Wischen gibt.

Da die Technik ausschließlich auf HTML und CSS beruht, kann an Stelle des <img> auch ein <picture>-Element innerhalb des Containers verwendet werden. Damit kann für jedes Endgeräte das optimal geeignete Bildformat eingebunden werden.

Für "Nicht-Wisch-Geräte" habe ich zusätzlich eine Autoscroll-Funktion eingebaut (Mauszeiger über das Bild). Hier das JavaScript:

<script> var cont = document.getElementById('img_container'); var dir = 1; var run = 0; function scroll() { cont = document.getElementById('img_container'); run = 1; timer = setInterval(function(){ Scroller() }, 15); width = cont.scrollWidth - cont.clientWidth ; function Scroller() { if (dir == 1) { cont.scrollLeft += 1; if (cont.scrollLeft >= width) { dir = 0} } else { cont.scrollLeft -= 1; if (cont.scrollLeft == 0) { dir = 1} } } } cont.onmouseover = function (evt) { if (run == 0) { scroll(); } } cont.onmouseout = function (evt) { if (run == 1) { clearInterval(timer); run = 0; } } cont.onclick = function (evt) { // toggeln if (run == 1) { clearInterval(timer); run = 0; } else { scroll(); } } </script>

Nachtrag 28.09.2020

Ein Klick auf das Vorschaubild lädt das Panorama – mit einem netten Bewegungseffekt auf entprechenden Geräten. Bei Bedarf (iOS 13+), wird mit diesem Klick (einmalig) der Dialog zum Aktivieren der Lage- und Bewegungssensoren (Gyroskop) aufgerufen. Das alles erfordert jetzt allerdings JavaScript, im Gegensatz zur eingangs beschriebenen CSS-only-Lösung.

Nachtrag 08.10.2020

Der logische nächste Schritt: Das Panorama als Vollbild anzeigen.

Icon "Zwei Pfeile" von Freepik from www.flaticon.com

Creative Commons Lizenzvertrag

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

Kommentare

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat