Wechseln der Vorher- und Nachher-Bildreihenfolge in der Slider-Galerie ⇐ JavaScript

[Guest]

Ich arbeite an einer einfachen Webgalerie mit zwei Modi: Standard (abwechselnd) und Vorher-Nachher-Slider-Modus. Das Problem ist, dass Vorher- und Nachher-Bilder im Slider-Modus vertauscht werden sollten, aber um Himmels willen kann ich das nicht herausfinden, außer Bilder in Ordnern zu wechseln, aber das stört den ersten Modus, aber der Umgang mit dem ersten Modus könnte einfacher sein, idealerweise Slider würde so funktionieren, wie es beabsichtigt ist. Hört sich nicht so schwierig an, bin aber ein Neuling in diesem Bereich und verstehe es einfach nicht.
Galerie, wechseln Sie in den Schiebereglermodus, indem Sie W drücken. Um es neu zu erstellen, erstellen Sie einfach zwei Ordner mit dem Namen „1“. " und „1 danach“ fügen zwei JPG-Bilder in jeden Ordner mit den Namen „1“ und „2“ ein und legen sie in denselben Ordner wie HTML.

Code: Select all

Dual Mode Gallery

body, html {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
font-family: sans-serif;
color: #fff;
}

.fullscreen-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
cursor: none; /* Default to transparent cursor */
}

.image-container {
position: relative;
width: 100%;
height: 100%;
}

.gallery-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}

.before-image,
.after-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}

.after-image {
clip-path: polygon(0 0, 0 100%, var(--clip-value) 100%, var(--clip-value) 0);
}

.slider {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
transform: translateX(-100%);
width: 10px;
background: transparent;
cursor: none; /* Transparent cursor */
}

.slider-gallery {
display: none; /* Initially hide slider mode */
}

.quick-menu {
position: fixed;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.8);
padding: 5px;
border-radius: 5px;
font-size: 12px;
display: none; /* Initially hidden */
}

.quick-menu h4 {
margin: 0;
font-size: 14px;
text-align: center;
}

.quick-menu ul {
padding: 0;
list-style: none;
margin: 5px 0 0;
}

.quick-menu li {
margin: 0;
}






[img]1 before/1.jpg[/img]
[img]1 after/1.jpg[/img]




[h4]Menu[/h4]
[list]
[*]Left-click: Next
[*]Right-click: Previous
[*]Arrow keys: Navigate
[*]W: Toggle mode
[*]R: Toggle menu
[/list]


let mode = 'Alternating';  // Default mode
let currentImageIndex = 0;
let menuVisible = false;

const alternatingContainer = document.querySelector('.alternating-gallery');
const sliderContainer = document.querySelector('.slider-gallery');
const quickMenu = document.getElementById('quickMenu');
const fullscreenContainers = document.querySelectorAll('.fullscreen-container');

// --- Alternating Gallery Mode Variables ---
const alternatingGalleryImage = document.querySelector('.gallery-image');
const alternatingImages = [
{ folder: '1 before', name: '1.jpg' },
{ folder: '1 after', name: '1.jpg' },
{ folder: '1 before', name: '2.jpg' },
{ folder: '1 after', name: '2.jpg' }
];

function loadAlternatingImage() {
const image = alternatingImages[currentImageIndex];
alternatingGalleryImage.src = `${image.folder}/${image.name}`;
}

function nextAlternatingImage() {
currentImageIndex = (currentImageIndex + 1) % alternatingImages.length;
loadAlternatingImage();
}

function prevAlternatingImage() {
currentImageIndex = (currentImageIndex - 1 + alternatingImages.length) % alternatingImages.length;
loadAlternatingImage();
}

// --- Slider Gallery Mode Variables ---
const sliderBeforeImage = document.querySelector('.before-image');
const sliderAfterImage = document.querySelector('.after-image');
const slider = document.querySelector('.slider');
const sliderImages = ['1.jpg', '2.jpg'];

function updateSliderPosition(x) {
slider.style.left = `${x}px`;
sliderAfterImage.style.setProperty('--clip-value', `${x}px`);
}

function nextSliderImage() {
currentImageIndex = (currentImageIndex + 1) % sliderImages.length;
sliderBeforeImage.src = `1 before/${sliderImages[currentImageIndex]}`;
sliderAfterImage.src = `1 after/${sliderImages[currentImageIndex]}`;
updateSliderPosition(sliderContainer.offsetWidth); // Reset slider to far right
}

function prevSliderImage() {
currentImageIndex = (currentImageIndex - 1 + sliderImages.length) % sliderImages.length;
sliderBeforeImage.src = `1 before/${sliderImages[currentImageIndex]}`;
sliderAfterImage.src = `1 after/${sliderImages[currentImageIndex]}`;
updateSliderPosition(sliderContainer.offsetWidth); // Reset slider to far right
}

sliderContainer.addEventListener('mousemove', (e) =>
updateSliderPosition(e.clientX - sliderContainer.offsetLeft)
);

sliderContainer.addEventListener('click', () => nextSliderImage());

// --- Mode Switching ---
function toggleMode() {
if (mode === 'Alternating') {
mode = 'Slider';
alternatingContainer.style.display = 'none';
sliderContainer.style.display = 'flex';
currentImageIndex = 0; // Reset index
nextSliderImage(); // Load the first slider image
} else {
mode = 'Alternating';
sliderContainer.style.display = 'none';
alternatingContainer.style.display = 'flex';
currentImageIndex = 0; // Reset index
loadAlternatingImage(); // Load the first alternating image
}
console.log(`Mode switched to: ${mode}`);
}

// --- Toggle Menu Visibility ---
function toggleMenu() {
menuVisible = !menuVisible;
quickMenu.style.display = menuVisible ? 'block' : 'none';
fullscreenContainers.forEach(container => {
container.style.cursor = menuVisible ? 'default' : 'none';
});
}

document.addEventListener('keydown', (e) => {
if (e.key === 'w') {
toggleMode();
} else if (e.key === 'ArrowRight') {
mode === 'Alternating' ? nextAlternatingImage() : nextSliderImage();
} else if (e.key === 'ArrowLeft') {
mode === 'Alternating' ? prevAlternatingImage() : prevSliderImage();
} else if (e.key === 'r') {
toggleMenu();
}
});

alternatingContainer.addEventListener('click', nextAlternatingImage);
alternatingContainer.addEventListener('contextmenu', (e) => {
e.preventDefault();
prevAlternatingImage();
});

sliderContainer.addEventListener('contextmenu', (e) =>  {
e.preventDefault();
prevSliderImage();
});

// Initialize default mode
loadAlternatingImage();