I’m working on a simple web gallery with two modes: standard (alternating) and before and after slider mode. Problem is that before and after images in slider mode should be switched but for the love of me I can’t figure it out, other than switching images in folders but that interferes with first mode but dealing with first mode might be simpler, ideally slider would work as it is intended. Doesn’t sound that hard but am new at this and I just don’t get it
Gallery, switch to slider mode by pressing W. To recrate just create two folders named “1 before” and “1 after” put two jpg images in each folder named “1” and “2” put them into the same folder as html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dual Mode Gallery</title>
<style>
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;
}
</style>
</head>
<body>
<div class="fullscreen-container alternating-gallery">
<div class="image-container">
<img class="gallery-image" src="">
</div>
</div>
<div class="fullscreen-container slider-gallery">
<div class="image-container">
<img class="before-image" src="1 before/1.jpg">
<img class="after-image" src="1 after/1.jpg" style="--clip-value: 100%;">
<div class="slider"></div>
</div>
</div>
<div class="quick-menu" id="quickMenu">
<h4>Menu</h4>
<ul>
<li>Left-click: Next</li>
<li>Right-click: Previous</li>
<li>Arrow keys: Navigate</li>
<li>W: Toggle mode</li>
<li>R: Toggle menu</li>
</ul>
</div>
<script>
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();
</script>
</body>
</html>