Klicken + Ziehen zum Drehen
<script>
// -----------------------------------
// EINSTELLUNGEN
// -----------------------------------
const imageFolder = 'images/';
const imagePrefix = 'Board_';
const imageExtension = '.webp';
// Prüft Board_01.webp bis Board_999.webp
const maxFramesToCheck = 999;
// Drag-Empfindlichkeit
// kleiner = feinfühliger / langsamer
// größer = schneller
const dragStep = 8;
// -----------------------------------
// VIEWER
// -----------------------------------
const viewer = document.getElementById('viewer');
let images = [];
let currentFrame = 0;
let dragging = false;
let lastX = 0;
// -----------------------------------
// HILFSFUNKTIONEN
// -----------------------------------
function padNumber(num, size) {
let s = String(num);
while (s.length < size) {
s = '0' + s;
}
return s;
}
function imageExists(src) {
return new Promise(resolve => {
const img = new Image();
img.onload = () => resolve(src);
img.onerror = () => resolve(null);
img.src = src;
});
}
// -----------------------------------
// BILDER AUTOMATISCH LADEN
// -----------------------------------
async function loadAvailableImages() {
const checks = [];
for (let i = 1; i <= maxFramesToCheck; i++) {
const fileName =
imageFolder +
imagePrefix +
padNumber(i, 2) +
imageExtension;
checks.push(imageExists(fileName));
}
const results = await Promise.all(checks);
images = results.filter(src => src !== null);
if (images.length === 0) {
alert('Keine Board-Bilder gefunden. Prüfe: images/Board_01.webp, Board_02.webp usw.');
return;
}
render();
}
// -----------------------------------
// RENDER
// -----------------------------------
function render() {
if (images.length === 0) return;
viewer.style.backgroundImage =
url('${images[currentFrame]}') ;
}
// -----------------------------------
// FRAME UPDATE
// -----------------------------------
function updateFrame(direction) {
if (images.length === 0) return;
currentFrame += direction;
if (currentFrame < 0) {
currentFrame = images.length - 1;
}
if (currentFrame >= images.length) {
currentFrame = 0;
}
render();
}
// -----------------------------------
// MOUSE
// -----------------------------------
viewer.addEventListener('mousedown', (e) => {
dragging = true;
lastX = e.clientX;
viewer.classList.add('dragging');
});
window.addEventListener('mouseup', () => {
dragging = false;
viewer.classList.remove('dragging');
});
window.addEventListener('mousemove', (e) => {
if (!dragging) return;
const delta = e.clientX - lastX;
if (Math.abs(delta) > dragStep) {
if (delta > 0) {
updateFrame(-1);
} else {
updateFrame(1);
}
lastX = e.clientX;
}
});
// -----------------------------------
// TOUCH SUPPORT
// -----------------------------------
viewer.addEventListener('touchstart', (e) => {
dragging = true;
lastX = e.touches[0].clientX;
});
viewer.addEventListener('touchend', () => {
dragging = false;
});
viewer.addEventListener('touchmove', (e) => {
if (!dragging) return;
const currentX = e.touches[0].clientX;
const delta = currentX - lastX;
if (Math.abs(delta) > dragStep) {
if (delta > 0) {
updateFrame(-1);
} else {
updateFrame(1);
}
lastX = currentX;
}
});
// -----------------------------------
// START
// -----------------------------------
loadAvailableImages();
</script>
