javascript - Product slider with hover to replace image within works only on one slide

Question

I’m working on a new product presentation section. It’s just a 2 column layout, one big photo on the left and 3 small ones on the right with some text beneath, all withing a slider to show one product at a time.

When you hover on the left column image a lens will appear to increase zoom on image and when you hover on one of the right column image it will replace the one on the left. This part goes well, except for the lens that goes a bit off on right and bottom border.

Here's a jsfiddle to see how it works.

The problem appeared when I added the slider. When I’m on any other slide except the first one the zoom doesn’t work anymore, neither the replacing of the left image column(it replaces the image from the first slide), it only works on the first slide.

I think I need to target active slide/image?

And here is the js

//Slider
let slideIndex = 0;

function showSlides() {
    let slides = document.getElementsByClassName("product-slide");

    for(i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

    slideIndex++;

    if(slideIndex > slides.length) 
        slideIndex = 1;

    slides[ slideIndex-1 ].style.display = "block";

    setTimeout(showSlides, 5000);
}
showSlides();

// Image hovering
let thumbnails = document.getElementsByClassName('thumbnail')
let activeImages = document.getElementsByClassName('active')

for(var i = 0; i < thumbnails.length; i++){

    thumbnails[i].addEventListener('mouseover', function(){
        if (activeImages.length > 0){
            activeImages[0].classList.remove('active')
        }
        
        this.classList.add('active')
        document.getElementById('featured').src = this.src
    })
}

document.getElementById('img-container').addEventListener('mouseover', function() {
    imageZoom('featured')
})

function imageZoom(imgID){
    let img = document.getElementById(imgID)
    let lens = document.getElementById('lens')

    lens.style.backgroundImage = `url( ${img.src} )`

    let ratio = 2

    lens.style.backgroundSize = (img.width * ratio) + 'px ' + (img.height * ratio) + 'px';

    img.addEventListener("mousemove", moveLens)
    lens.addEventListener("mousemove", moveLens)
    img.addEventListener("touchmove", moveLens)

    function moveLens(){
        let pos = getCursor()

        let positionLeft = pos.x - (lens.offsetWidth / 2)
        let positionTop = pos.y - (lens.offsetHeight / 2)

        if(positionLeft < 0 ){
            positionLeft = 0
        }

        if(positionTop < 0 ){
            positionTop = 0
        }

        if(positionLeft > img.width - lens.offsetWidth /3 ){
            positionLeft = img.width - lens.offsetWidth /3
        }

        if(positionTop > img.height - lens.offsetHeight /3 ){
            positionTop = img.height - lens.offsetHeight /3
        }


        lens.style.left = positionLeft + 'px';
        lens.style.top = positionTop + 'px';

        lens.style.backgroundPosition = "-" + (pos.x * ratio) + 'px -' +  (pos.y * ratio) + 'px'
    }

    function getCursor(){
        let e = window.event
        let bounds = img.getBoundingClientRect()

        let x = e.pageX - bounds.left
        let y = e.pageY - bounds.top
        x = x - window.pageXOffset;
        y = y - window.pageYOffset;
        
        return {'x':x, 'y':y}
    }
}
imageZoom('featured')

Answer 1

I think in the showSlides function you are missing identifying the lens src change during image swap?