I'm working on a superzoom but I need to make clicking on the thumbnails it change the src and the zoom-in of the main image without jquery.
Another important detail is that these images will be dynamic, being able to contain from 1 to 10 for example.
This is the superzoom I'm using.
Or if you know another easy way to do this would also be of great help.
I have separated the tasks into pieces so that you can understand what needs to be done.
listener event to smaller images 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
});
});
Do not forget to use a grande image for the thumbnails, because when you swap, the large image will be the size of the one clicked.