Галерея изображений не продолжается с одного и того же изображения при переключении между стандартным режимом и режимом ⇐ CSS

[Anonymous]

Я работаю над простой веб-галереей с двумя режимами: стандартным (чередующимся) и режимом до и после слайдера. Цель состоит в том, чтобы при переключении между этими двумя режимами клавишей «w» галерея продолжала работу с того же изображения, которое она отображала, только с другим режимом, проблема в том, что на изображении номер 3 и 4 в стандартном режиме и переключении на в режиме слайдера изображения черные, и нужно вернуться к первым двум изображениям, но переключение с первых двух изображений работает, я предполагаю, что это должно что-то делать с ползунком, накладывающим два изображения на другое, теперь при переключении наоборот, когда на первой паре изображений в режиме слайдера переключение идет на первое изображение, это хорошо, но при включении второй пары оно переходит к изображению после первого изображения, а не ко второму изображению перед.

Код: Выделить всё

let mode = 'alternating'; // Current mode ('alternating' or 'slider')
let currentImageIndex = 0; // Keep track of the current color index across modes
const alternating = ["#FF5733", "#33FF57", "#3357FF", "#57FF33"]; // Color values for alternating mode
const slider = ["#FF5733", "#33FF57"]; // Color values for slider mode
const galleryImg = document.getElementById("galleryImg");
const beforeImg = document.getElementById("beforeImg");
const afterImg = document.getElementById("afterImg");
const sliderElement = document.querySelector(".slider");
const menu = document.getElementById("menu");
let menuVisible = false; // Ensure the menu visibility state is initialized properly

// Update the gallery colors based on the current mode and index
function updateGallery() {
if (mode === 'alternating') {
galleryImg.style.backgroundColor = alternating[currentImageIndex]; // Use the current index to set the color
} else {
// Use the current index for slider mode (index is shared)
beforeImg.style.backgroundColor = slider[currentImageIndex]; // Swap before and after colors
afterImg.style.backgroundColor = slider[currentImageIndex];
}
}

// Toggle between alternating and slider modes
function toggleMode() {
mode = mode === 'alternating' ? 'slider' : 'alternating'; // Toggle mode
document.querySelector(".mode-alternating").style.display = mode === 'alternating' ? 'flex' : 'none';
document.querySelector(".mode-slider").style.display = mode === 'slider' ? 'flex' : 'none';
updateGallery(); // Ensure the same color continues in the new mode
}

// Navigate through colors while keeping index synced across modes
function navigate(next) {
const length = mode === 'alternating' ? alternating.length : slider.length; // Use appropriate length
currentImageIndex = (currentImageIndex + (next ? 1 : -1) + length) % length; // Update index cyclically
updateGallery(); // Refresh gallery to reflect the updated index
resetSlider(); // Reset slider for slider mode
}

// Show or hide the menu
function toggleMenu() {
menuVisible = !menuVisible;
menu.style.display = menuVisible ? 'block' : 'none';
}

// Update slider and after image clip based on mouse position
document.querySelector(".mode-slider").addEventListener('mousemove', e => {
const clip = Math.min(Math.max(e.clientX / window.innerWidth * 100, 0), 100); // Percent position
afterImg.style.setProperty('--clip', `${clip}%`); // Adjust after image clip
sliderElement.style.left = `${clip}%`; // Move slider
});

// Reset slider to fully reveal after color
function resetSlider() {
sliderElement.style.left = '100%'; // Reset slider to far right
afterImg.style.setProperty('--clip', '100%'); // Reveal after color completely
}

// Keyboard controls for toggling modes and navigation
document.addEventListener('keydown', e => {
if (e.key === 'w') toggleMode(); // Toggle mode
if (e.key === 'ArrowRight') navigate(true); // Navigate to next color
if (e.key === 'ArrowLeft') navigate(false); // Navigate to previous color
if (e.key === 'r') toggleMenu();  // Toggle menu visibility
});

// Initialize the gallery on page load
updateGallery();

Код: Выделить всё

/* General page styling */
body {
margin: 0;
background: #000;
color: #fff;
overflow: hidden;
font-family: sans-serif;
}

.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.fullscreen div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

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

/* Shows part of after color */
.slider {
position: absolute;
width: 10px;
background: #fff;
cursor: col-resize;
top: 0;
bottom: 0;
left: var(--clip, 100%);
transform: translateX(-50%);
}

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

Код: Выделить всё

 


 



Menu: W - Toggle, R - Menu, Arrows - Navigate

Подробнее здесь: https://stackoverflow.com/questions/793 ... een-standa