Multiple Modals for image gallery
Hello people of the internet!
I'm new at this so sorry in advance xD
I'm making a web page that is based on this code How To Create a Lightbox and my problem is i cant get it to work on multiple images.
The idea is you click button1 and the modal appears with gallery1 and when you click on button2 modal appears with modal2......button10 gallery10 and so on.
Thanks in advance 
Happy new year btw !!!
here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
// Open the Modal
function openModal() {
document.getElementById('myModal').style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
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.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
<style>
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.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 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;
}
/* Hide the slides by default */
.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 text */
.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);
}
</style>
</head>
<body>
<button onclick="openModal();currentSlide(1)">button1</button>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img1_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img2_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img3_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img4_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail image controls -->
<div class="column">
<img class="demo" src="img1.jpg" onclick="currentSlide(1)" alt="Nature">
</div>
<div class="column">
<img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="Mountains">
</div>
<div class="column">
<img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="Lights">
</div>
</div>
</div>
<button onclick="openModal();currentSlide(1)">button2</button>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img5_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img6_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img7_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img8_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail image controls -->
<div class="column">
<img class="demo" src="img5.jpg" onclick="currentSlide(1)" alt="Nature">
</div>
<div class="column">
<img class="demo" src="img6.jpg" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo" src="img7.jpg" onclick="currentSlide(3)" alt="Mountains">
</div>
<div class="column">
<img class="demo" src="img8.jpg" onclick="currentSlide(4)" alt="Lights">
</div>
</div>
</div>
</body>
</html>
I hope i knew how to get that cool ass button that shows you the code to appear (SRY)
AdChoices