Swap data-zoom and src content without jquery

Question

I’m working on a Superzoom but I need to make sure that when clicking on the thumbnails it changes the src and the date-zoom of the main image but without using jquery.

Another important detail is that these images will be dynamic, and may contain from 1 to 10 for example.

https://jsfiddle.net/f30359u3/2/

This is the Superzoom I’m wearing.

https://codepen.io/imgix/pen/WrRmLb

Or if you knew another simple way to do this would also be of great help.

Answer 1

I’ve separated the tasks into parts so you can understand what needs to be done.

1. Add an event listener in the smaller images
2. Swap the main image when clicking on smaller images is detected

Knowing this we have:

// Pega todos os elementos das miniaturas
var minis = document.querySelectorAll('#miniatura img');

// Pega a imagem principal
var main = document.querySelector('.superzoom img');

/**
 * Realize um loop em todas as miniaturas adicionando
 * o evento "click" em todas as imagens
 */ 
minis.forEach(function(element) {
    element.addEventListener('click', function() {
    main.src = this.src; // Altera o src da imagem principal pelo da miniatura
    main.dataset.zoom = this.src; // Altera a imagem do data-zoom
  });
});

Don’t forget to use an image grande for thumbnails, because when switching, the large image assumed the size of the one that was clicked.