Узнать lenght после клика по элементу
Добрый день! Подскажите пожалуйста, каким способом можно узнать 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);
|
mini lightbox
villiwalla,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5);
display: none;
}
.lightbox-image {
display: none;
width: 300px;
height: 400px;
line-height: 400px;
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #f1c40f;
border-radius: 5px;
text-align: center;
z-index: 11; /* 1px higher than the overlay layer */
}
.lightbox-image img{
height: 100%;
width: auto;
}
.show{
display: block;
}
.lightbox{
height: 150px;
}
</style>
</head>
<body>
<img src="http://www.disneyclips.com/imagesnewb/images/clipzummi2.gif" data-src="http://www.disneyclips.com/imagesnewb/images/clipzummi2.gif" rel="group1" class="lightbox">
<img src="http://www.0lik.ru/uploads/posts/2008-10/1223398222_0lik.ru_222.png" data-src="http://www.0lik.ru/uploads/posts/2008-10/1223398222_0lik.ru_222.png" rel="group1" class="lightbox">
<img src="http://cliparts.co/cliparts/8iG/686/8iG686orT.gif" data-src="http://cliparts.co/cliparts/8iG/686/8iG686orT.gif" rel="group1" class="lightbox">
<script>
var overlay = document.createElement('div');
overlay.className = 'overlay';
document.body.appendChild(overlay);
var containLb = document.createElement('div');
containLb.className = 'lightbox-image';
var bigImg = new Image;
containLb.appendChild(bigImg);
document.body.appendChild(containLb);
var indx = 0, arrSrc = [] ;
var gallery = document.querySelectorAll('.lightbox');
[].forEach.call(gallery, function(item, i) {
arrSrc[i] = item.dataset.src;
item.addEventListener('click', function() {
indx = i;
bigImg.src = arrSrc[indx];
containLb.classList.toggle("show");
overlay.classList.toggle("show");
},false);
});
overlay.addEventListener('click', function() {
containLb.classList.toggle("show");
overlay.classList.toggle("show");
}, false);
containLb.addEventListener('click', function(event) {
event.preventDefault();
indx = ++indx % arrSrc.length;
bigImg.src = arrSrc[indx];
}, false);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 02:35. |