Setzen Sie die Cursor-/Schiebereglerposition nach jedem Bildübergang in der Vor- und Nachher-Schieberegler-Galerie zurüc

Guest · Post by **Guest** » 13 Jan 2025, 18:33

In der Galerie ist der Schieberegler ganz rechts positioniert und so eingestellt, dass er dem Cursor folgt. Das Nachbild wird angezeigt, wenn die Maus nach links bewegt wird. Der Schieberegler wird nach jedem Bildübergang ganz nach rechts zurückgesetzt, aber das Problem besteht Das liegt daran, dass der Cursor dies nicht tut, sodass der Schieberegler beim Bewegen an die Position springt, an der sich der Cursor befindet, und das Nachbild teilweise oder vollständig zum Vorschein bringt.
Ich habe den Code für Pointer Locker als Proof of Concept erstellt Das funktionierte sogar mit der Umstellung per Klick auf Chrom, wenn auf der Website geklickt wird, wird die Zeigersperre aktiviert und die rote Kugel wird zum benutzerdefinierten Cursor. Wenn Sie darauf klicken, wird sowohl die Hintergrundfarbe geändert als auch die Cursorposition ganz nach rechts zurückgesetzt. Der Übergang der Hintergrundfarbe könnte ein Bildübergang sein und der Schieberegler könnte dem benutzerdefinierten Cursor folgen Im Idealfall wäre eine einfachere Lösung, die keinen Pointer Locker erfordert, schön, aber wenn nicht, wäre Hilfe bei der Integration der Pointer Locker-Lösung mit Galeriecode dankbar
Pointer Locker

Code: Select all

var dot = document.getElementById("dot");
var x = window.innerWidth / 2; // Start at the center horizontally
var y = window.innerHeight / 2; // Start at the center vertically
var pointerLocked = false;

// Position the dot at the initial center of the screen
dot.style.left = `${x}px`;
dot.style.top = `${y}px`;

// Function to toggle the background color and reset the dot to the far right
function toggleBackgroundColor() {
if (document.body.style.backgroundColor === "pink") {
document.body.style.backgroundColor = "purple";
} else {
document.body.style.backgroundColor = "pink";
}
resetCursorToFarRight(); // Move the cursor to the far right on color change
}

// Function to reset the cursor to the far right
function resetCursorToFarRight() {
x = window.innerWidth - 20; // Set the x position to the far right
dot.style.left = `${x}px`;
}

// Lock the pointer and toggle background color on click
document.body.addEventListener("click", function() {
toggleBackgroundColor();

// If pointer is not locked, request pointer lock
if (!pointerLocked) {
document.body.requestPointerLock(); // Lock the pointer
}
});

// Listen for pointer lock change to handle the cursor state
document.addEventListener("pointerlockchange", function() {
if (document.pointerLockElement === document.body) {
pointerLocked = true; // Pointer is now locked
dot.style.visibility = "visible"; // Show the controlled dot during pointer lock
document.body.style.cursor = "none"; // Hide the system cursor
document.getElementById('message').innerText = "Move your mouse to move the dot. Press 'Q' to reset.  Press Esc to exit Pointer Lock.";
} else {
pointerLocked = false; // Pointer is unlocked
dot.style.visibility = "hidden"; // Hide the dot (custom cursor) after pointer lock is exited
document.body.style.cursor = "auto"; // Show the system cursor
document.getElementById('message').innerText = "Click anywhere to activate Pointer Lock.";
}
});

// Track mouse movement when pointer is locked
document.addEventListener("mousemove", function(event) {
if (document.pointerLockElement === document.body) {
x += event.movementX; // Move horizontally
y += event.movementY; // Move vertically, but this will be restricted later

// Restrict the cursor horizontally
if (x < 0) {
x = 0; // Restrict movement at the left edge
}
if (x > window.innerWidth - 20) {
x = window.innerWidth - 20; // Restrict movement at the right edge
}

// Keep the y position fixed (vertically locked)
y = window.innerHeight / 2;

dot.style.left = `${x}px`;
dot.style.top = `${y}px`;
}
});

// Listen for keyboard input to reset dot position to the far right (press 'Q')
document.addEventListener("keydown", function(event) {
if (document.pointerLockElement === document.body && event.key.toLowerCase() === 'q') {
resetCursorToFarRight(); // Reset the dot position to the far right
}
});

// Handle Escape key to exit pointer lock manually
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && document.pointerLockElement === document.body) {
document.exitPointerLock();
}
});

Code: Select all

body {
margin: 0;
overflow: hidden;
background-color: pink;
height: 100vh;
}

#dot {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
pointer-events: none;
z-index: 999;
opacity: 0.8;
visibility: hidden;
/* Hidden before pointer lock */
}

#message {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}

Code: Select all


Click anywhere to activate Pointer Lock. Press 'Q' to reset the dot position.

Galerie, wechseln Sie in den Schiebereglermodus, indem Sie W drücken. Zum Neugestalten erstellen Sie einfach zwei Ordner mit den Namen „1 before“ und „1 after“ legen zwei JPG-Bilder in jedem Ordner mit den Namen „1“ und „2“ ab und legen sie im selben Ordner wie html ab.

Code: Select all

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();

Code: Select all

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;
}

Code: Select all



[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]

Setzen Sie die Cursor-/Schiebereglerposition nach jedem Bildübergang in der Vor- und Nachher-Schieberegler-Galerie zurüc

Setzen Sie die Cursor-/Schiebereglerposition nach jedem Bildübergang in der Vor- und Nachher-Schieberegler-Galerie zurüc ⇐ JavaScript

Quick Reply