Форум

villiwalla · #1 (**permalink**) 14.07.2016, 16:44

Добрый день! Подскажите пожалуйста, каким способом можно узнать 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);

рони · #2 (**permalink**) 14.07.2016, 18:02

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>

Форум

Справочник

Discord чат

Курсы javascript