Debele
Debele

Reputation: 1

Changing photos in the gallery using touchMove and click event

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

Answers (1)

Harsha
Harsha

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

Related Questions