Problem with adding multiple images to the elements (javascript loop Issue)

    const image = document.querySelectorAll('.image');
    /* Store the number of all elements with css class 'image' */
    let imageElementsCount = image.length;

    for (index = 0; index < imageElementsCount; index++)
    {
        let arrayElementPos = Math.floor(Math.random() * images.length);

        /* Receive the requested element from array with image objects */
        let imageObject = images[arrayElementPos];

        preloadImage(imageObject.hires);

        /* Assign received image properties to your html element */
        image[index].getElementsByTagName('a')[0].setAttribute('href', imageObject.hires);
        image[index].getElementsByTagName('img')[0].setAttribute('src', imageObject.thumb);

        image[index].addEventListener('mouseover', enterImage);
        image[index].addEventListener('touchstart', enterImage);

        image[index].addEventListener('mouseout', leaveImage);
        image[index].addEventListener('touchend', leaveImage);

        image[index].addEventListener('mousemove', move);
        image[index].addEventListener('touchmove', move);

        image[index].addEventListener('wheel', e =>
        {
            e.preventDefault();
            e.deltaY > 0 ? zoomLevel-- : zoomLevel++;

            if (zoomLevel < 1) zoomLevel = 1;
            if (zoomLevel > 5) zoomLevel = 5;

            console.log(`zoom level: ${zoomLevel}`);
            zoom.style.transform = `scale(${zoomLevel})`;
        });
    }

The loop is working until all founded divs got an assignment.

ToDos:

Remove in line

const image = document.querySelectorAll('.image')[0];

the [0].

Next step: Take a look into the body of for loop. Remove your lines of code in your original code

Thank you @Reporter, but I've allready done this editing my code for two days. :)

const zoo = document.querySelectorAll('.zoom');
const zooImg = document.querySelectorAll('.zoom-image');
const pic = document.querySelectorAll(".image");

let clearSrc;
let zoomLevel = 1;

const digiImgs = [{
    thumb: 'https://tasvir-graphic.de/links/works/digital/MuZe.webp',
    hires: 'https://tasvir-graphic.de/links/works/digital/MuZe.webp'
  },
  {
    thumb: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp',
    hires: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp'
  },
  {
    thumb: 'https://tasvir-graphic.de/links/works/digital/takeCare.webp',
    hires: 'https://tasvir-graphic.de/links/works/digital/takeCare.webp'
  },
]

// set to random image
for (var i = 0; i < pic.length; i++) {

  let img = digiImgs[i];
  pic[i].getElementsByTagName('a')[0].setAttribute('href', img.hires);
  pic[i].getElementsByTagName('img')[0].setAttribute('src', img.thumb);

  const preloadImage = url => {
    let img = new Image();
    img.src = url;
  }
  preloadImage(img.hires);

  const enterImage = function (e) {
    var zoo = this.parentNode.childNodes[3];
    zoo.classList.add('show', 'loading');
    clearTimeout(clearSrc);

    let posX, posY, touch = false;

    if (e.touches) {
      posX = e.touches[0].clientX;
      posY = e.touches[0].clientY;
      touch = true;
    } else {
      posX = e.clientX;
      posY = e.clientY;
    }

    touch
      ?
      zoo.style.top = `${posY - zoo.offsetHeight / 1.25}px` :
      zoo.style.top = `${posY - zoo.offsetHeight / 2}px`;
      zoo.style.left = `${posX - zoo.offsetWidth / 2}px`;

    let originalImage = this.getElementsByTagName('a')[0].getAttribute('href');
    var zoImg = this.parentNode.childNodes[3].childNodes[1];
    zoImg.setAttribute('src', originalImage);

    // remove the loading class
    zoImg.onload = function () {
      setTimeout(() => {
        zoo.classList.remove('loading');
      }, 500);
    }

  }


  const leaveImage = function () {
    // remove scaling to prevent non-transition 
    var zoImg = this.parentNode.childNodes[3].childNodes[1];
    var zoo = this.parentNode.childNodes[3];
    zoo.style.transform = null;
    zoomLevel = 1;
    zoo.classList.remove('show');
    clearSrc = setTimeout(() => {
      zoImg.setAttribute('src', '');
    }, 250);
  }

  const move = function (e) {
    e.preventDefault();
    var zoImg = this.parentNode.childNodes[3].childNodes[1];
    var zoo = this.parentNode.childNodes[3];

    let posX, posY, touch = false;

    if (e.touches) {
      posX = e.touches[0].clientX;
      posY = e.touches[0].clientY;
      touch = true;
    } else {
      posX = e.clientX;
      posY = e.clientY;
    }

    // move the zoom a little bit up on mobile (because of your fat fingers :<)
    touch ?
      zoo.style.top = `${posY - zoo.offsetHeight / 1.25}px` :
      zoo.style.top = `${posY - zoo.offsetHeight / 2}px`;
      zoo.style.left = `${posX - zoo.offsetWidth / 2}px`;

    let percX = (posX - this.offsetLeft) / this.offsetWidth,
        percY = (posY - this.offsetTop) / this.offsetHeight;

    let zoomLeft = -percX * zoImg.offsetWidth + (zoo.offsetWidth / 2),
        zoomTop = -percY * zoImg.offsetHeight + (zoo.offsetHeight / 2);

    zoImg.style.left = `${zoomLeft}px`;
    zoImg.style.top = `${zoomTop}px`;
  }


  pic[i].addEventListener('mouseover', enterImage);
  pic[i].addEventListener('touchstart', enterImage);

  pic[i].addEventListener('mouseout', leaveImage);
  pic[i].addEventListener('touchend', leaveImage);

  pic[i].addEventListener('mousemove', move);
  pic[i].addEventListener('touchmove', move);


  pic[i].addEventListener('wheel', e => {

    var zoo = e.target.parentNode.parentNode.parentNode.childNodes[3];
    console.log(zoo);
    e.preventDefault();
    e.deltaY > 0 ? zoomLevel-- : zoomLevel++;

    if (zoomLevel < 1) zoomLevel = 1;
    if (zoomLevel > 3) zoomLevel = 3;

    console.log(`zoom level: ${zoomLevel}`);
    zoo.style.transform = `scale(${zoomLevel})`;
  });
}

but there is a problem with the touch. When I touch using mobile, the photo works like a link and opens the photo. How to use preventDefault Touch?