0

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

1 Answer 1

0

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>

1
  • Yes, I know how to create slider with using button with "click" event, it even works in my application. "touchmove" doesn't work in my slider gallery.
    – Debele
    Feb 8 at 11:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.