Hover over image and get zoom effect on another image using javascript?

Code breakdown:

This code has a main image (the big picture at top), and then smaller preview pictures under than main image. (Ignore the big picture at bottom as this is used to help visually troubleshoot the code).

  // Preview-img change on hover

  function setURL(newUrl) {
    var url = newUrl;
    return function () {
      document.getElementById('main-img').setAttribute('src', url);
    }
  }
  document.getElementById('preview-img-one').addEventListener('mouseover', setURL('https://rb.gy/1jca3j'));
  document.getElementById('preview-img-two').addEventListener('mouseover', setURL('https://rb.gy/st92i9'));
  document.getElementById('preview-img-three').addEventListener('mouseover', setURL('https://rb.gy/ntzcbd'));
  document.getElementById('preview-img-four').addEventListener('mouseover', setURL('https://shorturl.at/pJPX1'));
  document.getElementById('preview-img-five').addEventListener('mouseover', setURL('https://shorturl.at/lMUX6'));

  // Magnify glass

  function zoomIn(event) {
    var element = document.getElementById("mag-overlay");
    element.style.display = "inline-block";
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
    element.style.backgroundPosition = (-posX * .9) + "px " + (-posY * .9) + "px";
 
    var element = document.getElementById("mag-overlay-two");
    element.style.display = "inline-block";
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
    element.style.backgroundPosition = (-posX * .9) + "px " + (-posY * .9) + "px";
  }

  .product-preview-imgs-container-center {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    width: 545.4px;
    height: 64px;
  }

  .preview-imgs-wrap {
    display: flex;
    justify-content: space-evenly;
    width: 352px;
    height: 64px;
  }

  #preview-img-one,
  #preview-img-two,
  #preview-img-three,
  #preview-img-four,
  #preview-img-five {
    width: 62.5667px;
    height: 62.5667px;
  }

  #preview-img-one:hover,
  #preview-img-two:hover,
  #preview-img-three:hover,
  #preview-img-four:hover,
  #preview-img-five:hover {
    border: 1px solid #191919;
    border-radius: 6px;
    width: 62.5667px;
    height: 62.5667px;
  }

  /* Magnifying Glass CSS */
  .main-img-container {
    width: 450.217px;
    height: 450.217px;
  }

  #main-img {
    width: 450.217px;
    height: 450.217px;
  }

  #main-img:hover {
    opacity: 0;
  }

  #mag-overlay {
    position: relative;
    left: -1px;
    bottom: 455px;
    width: 450.217px;
    height: 450.217px;
    display: inline-block;
    background-image: url("https://shorturl.at/qDN03");
    background-repeat: no-repeat;
    background-size: 175%;
    z-index: -1;
  }

  #mag-overlay-two {
    position: relative;
    left: -1px;
    bottom: 355px;
    width: 450.217px;
    height: 450.217px;
    display: inline-block;
    background-image: url("https://shorturl.at/qDN03");
    background-repeat: no-repeat;
    background-size: 175%;
    z-index: -1;
  }

  <div class="main-img-preview-img-wrap">
    <div class="main-img-container">
      <img id="main-img" onmousemove="zoomIn(event)" src="https://rb.gy/1jca3j">
      <div id="mag-overlay" onmousemove="zoomIn(event)"></div>
      <div id="mag-overlay-two" onmousemove="zoomIn(event)"></div>
    </div>
    <div class="product-preview-imgs-container-center">
      <div class="preview-imgs-wrap">
        <img id="preview-img-one" src="https://rb.gy/1jca3j" />
        <img id="preview-img-two" src="https://rb.gy/st92i9" />
        <img id="preview-img-three" src="https://rb.gy/ntzcbd" />
        <img id="preview-img-four" src="https://shorturl.at/pJPX1" />
        <img id="preview-img-five" src="https://shorturl.at/lMUX6" />
      </div>
    </div>
  </div>

What I want to accomplish:

What I want to happen is when the mouse hovers over each of the smaller preview pictures, the top main picture changes to the preview picture that has the mouse over it. I want to do this WITHOUT taking off the zoom effect, as the zoom effect is supposed to zoom in on each preview picture.

Sounds simple enough, but I've been struggling with this for days now.

What might work:

I'm assuming this part of the code needs a conditional statement like if..else to make it this work, which I've tried but have failed:

  function zoomIn(event) {
    var element = document.getElementById("mag-overlay");
    element.style.display = "inline-block";
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
    element.style.backgroundPosition = (-posX * .9) + "px " + (-posY * .9) + "px";
  }

  function zoomIn(event) {
    var element = document.getElementById("mag-overlay-two");
    element.style.display = "inline-block";
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
    element.style.backgroundPosition = (-posX * .9) + "px " + (-posY * .9) + "px";
  }

A visual of what I'm trying to implement:

I'm basically trying to copy the same effect aliexpress has on their website, which you can visually see here: https://shorturl.at/dkwKY

How can I achieve this with the code I have, or any other way using javascript? THANK YOU!

Solution

This seems to work

// Preview-img change on hover
function setURL(newUrl) {
    return function () {
        document.getElementById('main-img').setAttribute('src', newUrl);
        document.getElementById('mag-overlay').style.backgroundImage = "url('" + newUrl + "')";
        document.getElementById('mag-overlay-two').style.backgroundImage = "url('" + newUrl + "')";
    };
}

document.getElementById('preview-img-one').addEventListener('mouseover', setURL('https://rb.gy/1jca3j'));
document.getElementById('preview-img-two').addEventListener('mouseover', setURL('https://rb.gy/st92i9'));
document.getElementById('preview-img-three').addEventListener('mouseover', setURL('https://rb.gy/ntzcbd'));
document.getElementById('preview-img-four').addEventListener('mouseover', setURL('https://shorturl.at/pJPX1'));
document.getElementById('preview-img-five').addEventListener('mouseover', setURL('https://shorturl.at/lMUX6'));

document.getElementById('mag-overlay').addEventListener('mousemove', zoomIn);
document.getElementById('mag-overlay-two').addEventListener('mousemove', zoomIn);

// Magnify glass
function zoomIn(event) {
    var mainImg = document.getElementById("main-img");
    var containerRect = mainImg.getBoundingClientRect();

    var offsetX = event.clientX - containerRect.left;
    var offsetY = event.clientY - containerRect.top;

    var imageWidth = mainImg.offsetWidth;
    var imageHeight = mainImg.offsetHeight;

    var posX = (offsetX / imageWidth) * 100;
    var posY = (offsetY / imageHeight) * 100;

    var element = document.getElementById("mag-overlay");
    element.style.display = "inline-block";
    element.style.backgroundPosition = posX + "% " + posY + "%";

    var element2 = document.getElementById("mag-overlay-two");
    element2.style.display = "inline-block";
    element2.style.backgroundPosition = posX + "% " + posY + "%";
}

  .product-preview-imgs-container-center {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    width: 545.4px;
    height: 64px;
  }

  .preview-imgs-wrap {
    display: flex;
    justify-content: space-evenly;
    width: 352px;
    height: 64px;
  }

  #preview-img-one,
  #preview-img-two,
  #preview-img-three,
  #preview-img-four,
  #preview-img-five {
    width: 62.5667px;
    height: 62.5667px;
  }

  #preview-img-one:hover,
  #preview-img-two:hover,
  #preview-img-three:hover,
  #preview-img-four:hover,
  #preview-img-five:hover {
    border: 1px solid #191919;
    border-radius: 6px;
    width: 62.5667px;
    height: 62.5667px;
  }

  /* Magnifying Glass CSS */
  .main-img-container {
    width: 450.217px;
    height: 450.217px;
  }

  #main-img {
    width: 450.217px;
    height: 450.217px;
  }

  #main-img:hover {
    opacity: 0;
  }

  #mag-overlay {
    position: relative;
    left: -1px;
    bottom: 455px;
    width: 450.217px;
    height: 450.217px;
    display: inline-block;
    background-image: url("https://shorturl.at/qDN03");
    background-repeat: no-repeat;
    background-size: 175%;
    z-index: -1;
  }

  #mag-overlay-two {
    position: relative;
    left: -1px;
    bottom: 355px;
    width: 450.217px;
    height: 450.217px;
    display: inline-block;
    background-image: url("https://shorturl.at/qDN03");
    background-repeat: no-repeat;
    background-size: 175%;
    z-index: -1;
  }

<div class="main-img-preview-img-wrap">
    <div class="main-img-container">
        <img id="main-img" onmousemove="zoomIn(event)" src="https://rb.gy/1jca3j">
        <div id="mag-overlay"></div>
        <div id="mag-overlay-two"></div>
    </div>
    <div class="product-preview-imgs-container-center">
        <div class="preview-imgs-wrap">
            <img id="preview-img-one" src="https://rb.gy/1jca3j" />
            <img id="preview-img-two" src="https://rb.gy/st92i9" />
            <img id="preview-img-three" src="https://rb.gy/ntzcbd" />
            <img id="preview-img-four" src="https://shorturl.at/pJPX1" />
            <img id="preview-img-five" src="https://shorturl.at/lMUX6" />
        </div>
    </div>
</div>