Hallo,
Wir haben ein JavaScript gemacht um Bildnummern zu generieren leider funktioniert da etwas nicht die Bilder werden nicht Aktualisiert.
Kann mir jemand helfen?
Besten Dank
document.addEventListener('DOMContentLoaded', () => {
const apertureSlider = document.getElementById('aperture-slider');
const focalLengthSlider = document.getElementById('focal-length-slider');
const distanceSlider = document.getElementById('distance-slider');
const mainImage = document.getElementById('main-image');
const apertureValueSpan = document.getElementById('aperture-value');
const focalLengthValueSpan = document.getElementById('focal-length-value');
const distanceValueSpan = document.getElementById('distance-value');
const updateImage = () => {
const aperture = parseFloat(apertureSlider.value);
const focalLength = parseFloat(focalLengthSlider.value);
const distance = parseFloat(distanceSlider.value);
// Aktualisiere die angezeigten Werte
apertureValueSpan.textContent = `f/${aperture.toFixed(1)}`;
focalLengthValueSpan.textContent = `${focalLength} mm`;
distanceValueSpan.textContent = `${distance.toFixed(1)} m`;
// Passe den Dateinamen an die aktuellen Werte an
// Beispiel: f1_8_24mm_1_0m.jpg
const apertureFileName = getClosestValue(aperture, [2, 3, 4, 3, 8, 11, 16, 22]);
const focalLengthFileName = getClosestValue(focalLength, [24, 35, 50, 85, 135, 200]);
const distanceFileName = getClosestValue(distance, [1, 2, 3, 5, 7, 10]);
const imageSrc = `images/f${apertureFileName}_${focalLengthFileName}mm_${distanceFileName}m.jpg`;
mainImage.src = imageSrc;
};
const getClosestValue = (value, array) => {
return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
};
// Füge Event-Listener für alle Slider hinzu
apertureSlider.addEventListener('input', updateImage);
focalLengthSlider.addEventListener('input', updateImage);
distanceSlider.addEventListener('input', updateImage);
// Initialen Zustand beim Laden der Seite setzen
updateImage();
});
