Artikel-Hilfsmenü
Donnerstag, 8. Oktober 2020 – aktualisiert am Sonntag, 20. Dezember 2020
Panoramabilder auf der Webseite – mobile-optimiert
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.
Klick in die Vorschau für ein scrollbares Panoramabild
Klicken ins Panorama stoppt / startet Autoscroll (alternativ: Esc-/ Enter-Taste). Manuell Scrollen mit Maus oder Touchpad.
Jedes halbwegs aktuelle Smartphone / Tablet hat Bewegungssensoren, die man mittels JavaScript ansprechen kann, um einen pfiffigen Effekt zu erzeugen. Scrollen durch ein Panorama wird dann einfach durch Bewegung des Geräts erzeugt, fast als ob man sich durch einen virtuellen Raum bewegt.
Ich habe daher das Script erweitert. Klicken / Tippen auf das Vorschaubild öffnet eine neue Seite, und dort wird das Panorama als Vollbild dargestellt.
HTML der Panoramaseite
<div id="img_container">
<img src="images_no_ai/MKyV4X.jpg" alt="">
</div>
<button id="reload" onclick="run_pano();" ><img src = "images/gyroscope_128_white.png" width="32" alt="Gyroskop"></button>
<button id="back" onclick="history.back();" ><img src = "images/back_btn.png" width="32" alt="zurück"></button>
Das CSS
<style>
html,body {margin:0;padding:0;height:100%;}
#img_container {
overflow-x: scroll;
height: 100%;
}
#img_container img {
height: 100%;
vertical-align:text-bottom;
}
#back {
position:absolute;
display:block;
bottom: 15px;
left:calc(100vw - 45px);
border: 0;
padding: 0;
background:transparent;
cursor:pointer;
}
#reload {display:none;}
@media (pointer: coarse) {
#reload {
position:absolute;
display:block;
bottom: 15px;
left:10px;
border: 0;
padding: 0;
background:transparent;
}
}
</style>
Das JavaScript
<script>
// ########### Scollen #################
var cont = document.getElementById('img_container');
var width = cont.scrollWidth - cont.clientWidth ;
var dir = 1;
var run = 0;
function OS() {
const userAgent = navigator.userAgent;
if(/android/i.test(userAgent)){
return 'Android';
}
if(/iPad|iPhone|iPod/i.test(userAgent)){
return 'iOS';
}
}
var startpunkt;
if(OS() == 'iOS'){
var startpunkt = .55; // Pano an dieser Position laden - iOS
}
if(OS() == 'Android'){
var startpunkt = .3; // Pano an dieser Position laden - Android
}
cont.scrollLeft = width * startpunkt;
function scroll_cont() {
cont = document.getElementById('img_container');
run = 1;
timer = setInterval(function(){ Scroller() }, 10);
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.onclick = function () { // toggeln
if (run == 1) {
clearInterval(timer);
run = 0;
} else {
scroll_cont();
}
}
// ############# Bewegungssensor ###############
function subScroller(e) {
cont = document.getElementById('img_container');
width = cont.scrollWidth - cont.clientWidth ;
b = e.alpha + e.gamma + (360 * startpunkt);
if (b gt; 360) {b = b - 360;}
if (b lt;= 0) {b = b + 360;}
c = width - (b / 360 * width);
cont.scrollLeft = c;
document.getElementById('reload').style.display = "none";
}
function Sensor_on() {
window.addEventListener('deviceorientation', subScroller, false );
}
document.getElementById('img_container').ontouchend = function () {
window.removeEventListener('deviceorientation', subScroller);
document.getElementById('reload').style.display = "block";
}
function run_pano() {
if ( typeof( DeviceOrientationEvent ) !== "undefined" && typeof( DeviceOrientationEvent.requestPermission ) === "function" ) {
DeviceOrientationEvent.requestPermission().then(function (response) {
if (response == 'granted') {
window.addEventListener('deviceorientation', function (e) {});
Sensor_on();
}
});
}
Sensor_on();
}
window.onload = function () {
if(typeof(document.ontouchstart) != 'undefined'){
run_pano();
} else {
if (run == 1) {
clearInterval(timer);
run = 0;
} else {
scroll_cont();
}
}
}
</script>
Nachtrag 11.10.2020
Hier eine Alternative zur beschriebenen Technik für Leute, die kein Problem damit haben, Fotos bei Google zu hosten. Voraussetzung ist ein iPhone und die Google Street View App. Zum Aufnehmen eines Panoramas einfach in Google Street View unten rechts auf das Kamera-Symbol tippen und "Kamera" wählen. Dann entsprechend den Informationen auf dem Bildschirm um die eigene Achse drehen. Dabei wird automatisch ein Panorama aufgenommen. Anschließend die Aufnahme bei Street View veröffentlichen.
Und so könnte das Ergebnis aussehen:
Klick ins Bild für ein Panorama auf Google Street View
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.