'Put multiple slideshows using modals on a page

I'm trying to create a lightbox effect using modals and slideshows. It works just fine as long as only one slideshow is on a page. I would like to have multiple slideshow/lightboxs on a page. I am using the CSS and java from the link below in addition to bootstrap 3.

https://www.w3schools.com/howto/howto_js_lightbox.asp

Here is the code I modified from the link. I'm new at this so any help is appreciated.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BL Portfolio</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/BLportfolio.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    body {
    background-color: #FFFFFF;
}
    a:link {
    color: #B77433;
    text-decoration: none;
}
a:hover {
    color: #FFD600;
    text-decoration: none;
}
    a:visited {
    text-decoration: none;
}
    a:active {
    text-decoration: none;
}
    </style>
    <link href="css/lightbox.css" rel="stylesheet" type="text/css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/averia-libre:n3:default.js" type="text/javascript"></script>


</head>
  <body>

<!-- Illustration Section -->      
<div class="container-fluid">
    <div class="row"><h6>ILLUSTRATION</h6>
      <div class="row">
            <div class="item2">
             <img src="images/illustration/thumbs/steampunkThumb.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
            </div>
            <div class="item2">
             <img src="images/illustration/thumbs/sdThumb.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
             </div>
            <div class="item2">
              <img src="images/illustration/thumbs/monsterThumb.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
             </div>
              <div class="item2">
                <img src="images/illustration/thumbs/weaselThumb.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
              </div>
             <div class="item2">
              <img src="images/illustration/thumbs/supermanThumb.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow">
            </div>
             <div class="item2">
               <img src="images/illustration/thumbs/bushThumb.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow">
             </div>
            <div class="row"><HR SIZE="2" WIDTH="95%"></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 / 6</div>
        <img src="images/illustration/steampunk.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 6</div>
        <img src="images/illustration/sd.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 6</div>
        <img src="images/illustration/monster.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 6</div>
        <img src="images/illustration/weasel.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">5 / 6</div>
        <img src="images/illustration/superman.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">6 / 6</div>
        <img src="images/illustration/bush.jpg" 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="item3">
      <img class="demo" src="images/illustration/thumbs/steampunkThumb.jpg" onclick="currentSlide(1)" alt="STEAMPUNK">
    </div>

    <div class="item3">
      <img class="demo" src="images/illustration/thumbs/sdThumb.jpg" onclick="currentSlide(2)" alt="SAN DIEGO">
    </div>

    <div class="item3">
      <img class="demo" src="images/illustration/thumbs/monsterThumb.jpg" onclick="currentSlide(3)" alt="MONSTER">
    </div>

    <div class="item3">
      <img class="demo" src="images/illustration/thumbs/weaselThumb.jpg" onclick="currentSlide(4)" alt="WEASEL">
    </div>

    <div class="item3">
      <img class="demo" src="images/illustration/thumbs/supermanThumb.jpg" onclick="currentSlide(5)" alt="SUPERMAN">
    </div>

    <div class="item3">
      <img class="demo" src="images/illustration/thumbs/bushThumb.jpg" onclick="currentSlide(6)" alt="W">
    </div>

  </div>
</div>
<!-- Illustration End -->      

<!-- Technical Section -->       
<div class="container-fluid">
    <div class="row"><h6>TECHNICAL DRAFTING</h6>
      <div class="row">
            <div class="item2">
             <img src="images/technical/thumb/tech1Thumb.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow">
            </div>
            <div class="item2">
             <img src="images/technical/thumb/tech2Thumb.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow">
          </div>
            <div class="item2">
              <img src="images/technical/thumb/tech3Thumb.jpg" onclick="openModal();currentSlide(9)" class="hover-shadow">
          </div>
              <div class="item2">
                <img src="images/technical/thumb/tech4Thumb.jpg" onclick="openModal();currentSlide(10)" class="hover-shadow">
              </div>
             <div class="item2">
              <img src="images/technical/thumb/tech5Thumb.jpg" onclick="openModal();currentSlide(11)" class="hover-shadow">
            </div>
             <div class="item2">
               <img src="images/technical/thumb/tech6Thumb.jpg" onclick="openModal();currentSlide(12)" class="hover-shadow">
             </div>
            <div class="row"><HR SIZE="2" WIDTH="95%"></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 / 6</div>
        <img src="images/technical/tech1.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 6</div>
        <img src="images/technical/tech2.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 6</div>
        <img src="images/technical/tech3.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 6</div>
        <img src="images/technical/tech4.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">5 / 6</div>
        <img src="images/technical/tech5.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">6 / 6</div>
        <img src="images/technical/tech6.jpg" 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="item3">
      <img class="demo" src="images/technical/thumb/tech1Thumb.jpg" onclick="currentSlide(1)" alt="Tech1">
    </div>

    <div class="item3">
      <img class="demo" src="images/technical/thumb/tech2Thumb.jpg" onclick="currentSlide(2)" alt="Tech2">
    </div>

    <div class="item3">
      <img class="demo" src="images/technical/thumb/tech3Thumb.jpg" onclick="currentSlide(3)" alt="Tech3">
    </div>

    <div class="item3">
      <img class="demo" src="images/technical/thumb/tech4Thumb.jpg" onclick="currentSlide(4)" alt="Tech4">
    </div>

    <div class="item3">
      <img class="demo" src="images/technical/thumb/tech5Thumb.jpg" onclick="currentSlide(5)" alt="Tech5">
    </div>

    <div class="item3">
      <img class="demo" src="images/technical/thumb/tech6Thumb.jpg" onclick="currentSlide(6)" alt="Tech6">
    </div>

  </div>
</div>       
<!-- Technical End -->        



    </div>
  </div>
  <footer class="row">


  </footer>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.3.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
    <script src="js/lightbox.js"></script>



  </body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

.row > .column {
  padding: 0 8px;
}

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

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}


/* The Modal2 (background) */
.modal2 {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal2 Content */
.modal2-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}


/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

Java

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;
}
javascriptcssmodal-dialogslideshowlightbox


Solution 1:[1]

came looking for a different solution, but looking at the code, it seems that the error may be here...

<div class="item3">
  <img class="demo" src="images/technical/thumb/tech1Thumb.jpg" onclick="currentSlide(1)" alt="Tech1">
</div>

In the 2nd batch, should not the "currentSlide(1) actually be a continuation from the 6 slides above, so the content should be currentSlide(7) and onward down the script? Perhaps it was too simple...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Peter Stevens

Related Questions