modules-galleries-nevena/js/002-swap-pictures.js

17 lines
583 B
JavaScript

function swapPicture() {
let bigImage = self.querySelector('.big-image picture');
// insert the big image before the one clicked on
this.parentNode.insertBefore(bigImage, this);
// move the clicked image to the big image container
self.querySelector('.big-image').appendChild(this);
// swap event listeners
this.removeEventListener('click', swapPicture);
bigImage.addEventListener('click', swapPicture);
}
self.querySelectorAll('.gallery-images picture')
.forEach((item, index) => {
item.addEventListener('click', swapPicture);
}
);