Reputation: 1
I'm building a website and I have a problem in one of the steps. I display the photo gallery, after click the button the photo resize to the whole page, then I use the buttons to move the previous and next photos, everything works. I want to add functionality on a mobile device in swapping photo, but I have a problem with that.
If I select photo [2] I can only scroll pictures forward [3] and back [1]. I can't even display the selected photo[2].
Can someone help and point out what I'm doing wrong? I’ve just started learning JavaScript.
[1]: https://codepen.io/AdamXodeo/pen/rNrgmom
https://codepen.io/AdamXodeo/pen/rNrgmom
const photos = Array.from(document.querySelectorAll(".gallery_item img"));
const popup = document.querySelector(".popup");
const popup_close = document.querySelector(".popup_close");
const popup_img = document.querySelector(".popup_img");
const arrow_left = document.querySelector(".popup_arrow--left");
const arrow_right = document.querySelector(".popup_arrow--right");
let currentImgIndex=0;
let isDragging=false;
let startPos=0;
let currentTranslate=0;
let prevTranslate=0;
let animationID=0;
photos.forEach((photo, index) => {
const showPopup = (e) => {
popup.classList.remove("hidden");
popup_img.src = e.target.src;
currentImgIndex = index;
};
photo.addEventListener("click", showPopup);
// touch events
popup_img.addEventListener("touchstart", touchStart(index));
popup_img.addEventListener("touchend", touchEnd);
popup_img.addEventListener("touchmove", touchMove);
});
const showNextImg = () => {
if (currentImgIndex === photos.length - 1) {
currentImgIndex = 0;
} else {
currentImgIndex++;
}
popup_img.src = photos[currentImgIndex].src;
};
const showPreviousImg = () => {
if (currentImgIndex === 0) {
currentImgIndex = photos.length - 1;
} else {
currentImgIndex--;
}
popup_img.src = photos[currentImgIndex].src;
};
const closePopup = () => {
popup.classList.add("fade-out");
setTimeout(() => {
popup.classList.add("hidden");
popup.classList.remove("fade-out");
}, 300);
};
document.addEventListener("keydown", (e) => {
if (!popup.classList.contains("hidden")) {
if (e.code === "ArrowRight" || e.keyCode === 39) {
showNextImg();
}
if (e.code === "ArrowLeft" || e.keyCode === 37) {
showPreviousImg();
}
if (e.code === "Escape" || e.keyCode === 27) {
closePopup();
}
}
});
popup_close.addEventListener("click", closePopup);
arrow_right.addEventListener("click", showNextImg);
arrow_left.addEventListener("click", showPreviousImg);
function touchStart(index){
return function (event) {
currentImgIndex = index;
startPos = getPositionX(event);
isDragging = true;
popup.classList.add("grabbing");
}
}
function touchMove(event){
if(isDragging){
const currentPosition = getPositionX(event);
currentTranslate = prevTranslate + currentPosition - startPos;
}
}
function touchEnd(){
isDragging = false;
const movedBy = currentTranslate - prevTranslate;
if(movedBy < -30 && currentImgIndex < photos.length - 1) currentImgIndex += 1 ;
if(movedBy > 30 && currentImgIndex > 0) currentImgIndex -= 1;
changePhotoByIndex();
popup.classList.remove("grabbing");
}
function getPositionX(event){
return event.type.includes("mouse") ? event.pageX : event.touches[0].clientX;
}
function animation() {
if (isDragging) requestAnimationFrame(animation);
}
function changePhotoByIndex() {
popup_img.src = photos[currentImgIndex].src;
prevTranslate = currentTranslate;
}
Upvotes: 0
Views: 229
Reputation: 16
const prevButton = document.querySelector('#prev');
const nextButton = document.querySelector('#next');
const images = document.querySelectorAll('.gallery img');
let currentImage = 0;
images[currentImage].classList.add('active');
prevButton.addEventListener('click', function() {
images[currentImage].classList.remove('active');
currentImage--;
if (currentImage < 0) {
currentImage = images.length - 1;
}
images[currentImage].classList.add('active');
});
nextButton.addEventListener('click', function() {
images[currentImage].classList.remove('active');
currentImage++;
if (currentImage >= images.length) {
currentImage = 0;
}
images[currentImage].classList.add('active');
});
.gallery {
display: flex;
}
.gallery img {
width: 100%;
height: auto;
display: none;
}
.gallery .active {
display: block;
}
<div class="gallery">
<img src="https://www.pakainfo.com/wp-content/uploads/2021/09/dummy-user-image-url-300x200.jpg" class="active">
<img src="https://www.pakainfo.com/wp-content/uploads/2021/09/live-image-link-300x157.jpg">
<img src="https://www.pakainfo.com/wp-content/uploads/2021/09/online-dummy-image-url-300x201.jpg">
<img src="https://www.pakainfo.com/wp-content/uploads/2021/09/test-image-online-300x148.jpg">
<img src="https://www.pakainfo.com/wp-content/uploads/2021/09/sample-image-url-link-300x300.png">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>
Upvotes: 0