Hi,
Ich habe folgenden Code:
HTML:
<div id="panorama-container">
<img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />
<a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
max-width: 100%;
overflow: hidden;
}
#panorama-container {
width: 100%;
height: 100%;
}
#panorama-image {
position: absolute;
left: 0;
top: 0;
height: 100%;
max-width: auto;
overflow-y: hidden;
}
#fullscreen-button {
position: absolute;
top: 20px;
right: 20px;
font-size: 16px;
color: #fff;
text-decoration: none;
}
JS:
var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;
fullscreenButton.addEventListener("click", function() {
if (panoramaContainer.requestFullscreen) {
panoramaContainer.requestFullscreen();
} else if (panoramaContainer.webkitRequestFullscreen) {
panoramaContainer.webkitRequestFullscreen();
} else if (panoramaContainer.mozRequestFullScreen) {
panoramaContainer.mozRequestFullScreen();
} else if (panoramaContainer.msRequestFullscreen) {
panoramaContainer.msRequestFullscreen();
}
});
document.addEventListener("touchstart", function(event) {
initialX = event.touches[0].clientX;
});
document.addEventListener("touchmove", function(event) {
if (initialX === null) {
return;
}
var currentX = event.touches[0].clientX;
var diffX = currentX - initialX;
initialX = currentX;
movePanorama(diffX); /* Change this value to adjust the speed of the movement */
event.preventDefault();
});
document.addEventListener("touchend", function() {
initialX = null;
});
function movePanorama(amount) {
position += amount;
panoramaImage.style.left = position + "px";
}
Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.
Vielleicht versteht ihr was ich meine
LG
