DEVHIDE
Login Or Sign up

Issues with Lightbox cycling through images

42 Views Asked by At

I'm having some issues with my lightbox cycling through images correctly, I wanted to avoid using a plugin for a learning experience but I've run into some trouble at the end. The gallery looks great, minus some breakpoint issues but I'll get there. The problem I'm having is getting the lightbox to cycle images correctly, it currently displays all of the images in a vertical, scroll-able, column once activated. 

function openModal() {
    document.getElementById('myModal').style.display = "block";
  }

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  captionText.innerHTML = dots[slideIndex - 1].alt;
}
ul {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

ul li {
  list-style: none;
  margin-bottom: 25px;
}

ul li img {
  cursor: pointer;
}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

div.responsivecontainer {
  width=80%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
  #gallery li:nth-child(odd) {
    clear: left;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}
<div class="responsivecontainer">
  <div class="row">
    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(1)" alt="Louvered Roll Die antiwrap sensor" width="300" height="200">
        </a>
        <div class="desc">Louvered Roll Die antiwrap sensor</div>
      </div>
    </div>


    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(2)" alt="Compact roll die and starblade module in headstand" width="300" height="200">
        </a>
        <div class="desc">Compact roll die </div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(3)" alt="Compact roll die and starblade module in headstand" width="300" height="200">
        </a>
        <div class="desc">Compact roll die </div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(4)" alt="Turbulator" width="300" height="200">
        </a>
        <div class="desc">Turbulator</div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(5)" alt="Oil cooler dies" width="300" height="200">
        </a>
        <div class="desc">Oil cooler dies</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(6)" alt="Bump Die" width="300" height="200">
        </a>
        <div class="desc">Bump Die</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(7)" alt="Louvered roll dies" width="300" height="200">
        </a>
        <div class="desc">Louvered roll dies</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(8)" alt="Louvered roll die" width="300" height="200">
        </a>
        <div class="desc">Louvered roll die</div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(9)" alt="Roll die with copper material" width="300" height="200">
        </a>
        <div class="desc">Roll die with copper material</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(10)" alt="Bump die" width="300" height="200">
        </a>
        <div class="desc">Bump die</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(11)" alt="Turbulator" width="300" height="200">
        </a>
        <div class="desc">Turbulator</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(12)" alt="Louvered Die" width="300" height="200">
        </a>
        <div class="desc">Louvered Die</div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(13)" alt="European style roll dies and gears" width="300" height="200">
        </a>
        <div class="desc">European style roll dies and gears</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(14)" alt="European style roll die and starblade unit in headstand" width="300" height="200">
        </a>
        <div class="desc">European style roll</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(15)" alt="Louvered Die" width="300" height="200">
        </a>
        <div class="desc">Louvered Die</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(16)" alt="Ten inch roll die" width="300" height="200">
        </a>
        <div class="desc">Ten inch roll die</div>
      </div>
    </div>
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">5 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">6 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">7 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">8 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">9 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">10 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">11 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">12 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">13 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">14 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">15 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">16 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(1)" alt="Louvered Roll Die antiwrap sensor">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(2)" alt="Compact roll die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(3)" alt="Compact roll die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(4)" alt="Turbulator">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(5)" alt="Oil cooler dies">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(5)" alt="Bump Die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(7)" alt="Louvered roll dies">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(8)" alt="Louvered roll die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(9)" alt="Roll die with copper material">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(10)" alt="Bump die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(11)" alt="Turbulator">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(12)" alt="Louvered Die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(13)" alt="European style roll dies and gears">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(14)" alt="European style roll">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(15)" alt="Louvered Die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(16)" alt="Ten inch roll die">
    </div>
  </div>
</div>
<br></br>
<br></br>

It's Close, but I was looking for a more traditional slider experience. Thanks for the assistance, much appreciated.

javascript html css bootstrap-lightbox
Original Q&A
0

There are 0 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in BOOTSTRAP-LIGHTBOX

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

dbora

Copyright © 2021 Jogjafile Inc.