Добрый день! Подскажите пожалуйста, каким способом можно узнать lenght активного элемента по которому кликнули? Задача в том что бы при клике на увеличенное изображение, появлялось следующие за ним изображение. Добавлять класс на элемент для определения что он сейчас активный и от него +1/-1 не хотелось бы.
<img src="img/image_01_mini.jpg" data-src="img/image_01.jpg" rel="group1" class="lightbox">
<img src="img/image_02_mini.jpg" data-src="img/image_02.jpg" rel="group1" class="lightbox">
<img src="img/image_03_mini.jpg" data-src="img/image_03.jpg" rel="group1" class="lightbox">
var overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.style.height = screen.availHeight + 'px';
document.body.appendChild(overlay);
var gallery = document.querySelectorAll('.lightbox');
for (var i = 0; i < gallery.length; i++) {
gallery[i].addEventListener('click', function () {
var linkLb = this.getAttribute('data-src');
overlay.classList.add('show');
var containLb = document.createElement('div')
containLb.className = 'lightbox-image';
containLb.innerHTML = '<img src=' + linkLb + '>';
overlay.parentNode.appendChild(containLb);
}, false);
}
overlay.addEventListener('click', function hideLb() {
if (overlay.classList == 'show')
overlay.classList.remove('show');
overlay.nextElementSibling.remove('lightbox-image');
}, false);