We Keep Coding

multiple javascript lightbox in one page typeError: slides3[(slideIndex3 - 1)] is undefined

ive try any single way to make multiple box of lightbox in one page,ive replace each possible class and variable,but the image on lighbox 1,and 2 doesnt appears,or vice versa.ive try another way to solve this by read any program on internet,but ive to try more to make this project cause this project has taken 3 days.
// for lighbox1
function openModal() {
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal1").style.display = "none";
}
// -------------------------
var slideIndex1 = 1;
showSlides(slideIndex1);
function plusSlides(n) {
showSlides(slideIndex1 += n);
}
function currentSlide(n) {
showSlides(slideIndex1 = n);
}
// lighbox1
function showSlides(n) {
var i;
var slides1 = document.getElementsByClassName("mySlides1");
var dots1 = document.getElementsByClassName("demo1");
var captionText1 = document.getElementById("caption1");
// lighbox 1
if (n > slides1.length) {slideIndex1 = 1}
if (n < 1) {slideIndex1 = slides1.length}
for (i = 0; i < slides1.length; i++) {
slides1[i].style.display = "none";
}
for (i = 0; i < dots1.length; i++) {
dots1[i].className = dots1[i].className.replace(" active", "");
}
slides1[slideIndex1-1].style.display = "block";
dots1[slideIndex1-1].className += " active";
captionText1.innerHTML = dots1[slideIndex1-1].alt;
}
// ---------------------------------------
// =======================================
// for lighbox2
function openModal() {
document.getElementById("myModal2").style.display = "block";
}
function closeModal() {
document.getElementById("myModal2").style.display = "none";
}
// ---------------------
var slideIndex2 = 1;
showSlides(slideIndex2);
function plusSlides(o) {
showSlides(slideIndex2 += o);
}
function currentSlide(o) {
showSlides(slideIndex2 = o);
}
// lightbox2
function showSlides(o){
var j;
var mySlides2 = document.getElementsByClassName("mySlides2");
var dots2 = document.getElementsByClassName("demo2");
var captionText2 = document.getElementById("caption2");
// lighbox 2
if (o > slides2.length) {slideIndex2 = 1}
if (o < 1) {slideIndex2 = slides2.length}
for (j = 0; j < slides2.length; j++) {
slides2[j].style.display = "none";
}
for (j = 0; j < dots2.length; j++) {
dots2[j].className = dots2[j].className.replace(" active", "");
}
slides2[slideIndex2-1].style.display = "block";
dots2[slideIndex2-1].className += " active";
captionText2.innerHTML = dots2[slideIndex2-1].alt;
}
// ---------------------------------------
// =======================================
// for lighbox3
function openModal() {
document.getElementById("myModal3").style.display = "block";
}
function closeModal() {
document.getElementById("myModal3").style.display = "none";
}
// --------------------
var slideIndex3 = 1;
showSlides(slideIndex3);
function plusSlides(p) {
showSlides(slideIndex3 += p);
}
function currentSlide(p) {
showSlides(slideIndex3 = p);
}
// lighbox3
function showSlides(p){
var k;
var slides3 = document.getElementsByClassName("mySlides3");
var dots3 = document.getElementsByClassName("demo3");
var captionText3 = document.getElementById("caption3");
// lighbox 3
if (p > slides3.length) {slideIndex3 = 1}
if (p < 1) {slideIndex3 = slides3.length}
for (k = 0; k < slides3.length; k++) {
slides3[k].style.display = "none";
}
for (k = 0; k < dots3.length; k++) {
dots3[k].className = dots3[k].className.replace(" active", "");
}
slides3[slideIndex3-1].style.display = "block";
dots3[slideIndex3-1].className += " active";
captionText3.innerHTML = dots3[slideIndex3-1].alt;
}
// ---------------------------------------
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.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 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;
}
.mySlides1.mySlides2.mySlides3 {
display: none;
}
.cursor {
cursor: pointer;
}
/* 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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: rgb(10, 10, 10);
padding: 2px 16px;
color: white;
}
.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);
}
<h2 style="text-align:center">Lightbox1</h2>
<!-- this for lightbox 1 -->
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides1">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end lightbox1 -->
<br>
<br>
<br>
<!-- this for lighbox2 -->
<h2 style="text-align:center">Lightbox2</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption1"></p>
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end ligtbox2 -->
<br>
<br>
<br>
<!-- this ligtbox3 -->
<h2 style="text-align:center">Lightbox3</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal3" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides3">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption2"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end lightbox3 -->

make multiple lighbox in one page with javascript (Lighbox 2& 3 doesnt work)

ive read and try all tutorial from any site on internet,im rather forgot about javascript because snce for 3 years ago i using javascript,but now im still learn again javascript with their framework.And from many tutorial ive seen one of them site is from w3school,from those site tutorial they give example to make one lighbox image on one page.but i wanna make it become three lighbox at once.but the problem come when i change each class name from each lightbox.ive try to make multiple class or id name on js script,but it seems doesnt work.
excpected:
each lighbox shows their own image,but not just image on lighbox1.
my trouble:
in lighbox 2 & 3,the image that appears is form lighbox 1.
and this is my code:
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","mySlides1");
// for (var i = 0; i < slides.length; i++) {
// slides[i].style.display = "none";
// }
var dots = document.getElementsByClassName("demo","demo1");
// for (var i = 0; i < dots.length; i++) {
// dots[i].style.display = "block";
// }
var captionText = document.getElementById("caption","caption1");
// for (var i = 0; i < captionText.length; i++) {
// captionText[i].style.display = "block";
// }
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;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.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 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.mySlides1.mySlides2 {
display: none;
}
.cursor {
cursor: pointer;
}
/* 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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: rgb(10, 10, 10);
padding: 2px 16px;
color: white;
}
.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);
}
<h2 style="text-align:center">Lightbox1</h2>
<!-- this for lightbox 1 -->
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<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="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end lightbox1 -->
<br>
<br>
<br>
<!-- this for lighbox2 -->
<h2 style="text-align:center">Lightbox2</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides1">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption1"></p>
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end ligtbox2 -->
<br>
<br>
<br>
<!-- this ligtbox3 -->
<h2 style="text-align:center">Lightbox3</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption2"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end lightbox3 -->

The issue is in the code due to incorrect usage of couple of Javascript and HTML concepts such as:
The ids for element should be unique (read more here). In the code myModal is used as the id multiple times. Have fixed the same to create multiple unique ids such as myModal1, myModal2, myModal3.
One needs to pass the context properly while calling the function. Both the openModal and closeModal function are not taking any arguments. The value of id is hardcoded to myModal and hence it always refers to the first element with id as myModal and so, LightBox1 becomes visible. To fix that, have explicitly passed the ids while calling the function and saved it in a global variable for later usage (Note: Usage of global variable is bad. Have fixed the code in little haste so used global variable read more here).
getElementsByClassName takes only one argument, in the code it is taking two arguments at multiple places. Have fixed the same (read more here).
Have fixed the code for you and made it working for the mentioned case in the question. But there are some places where code it still wrong, that can be fixed by looking at the fixed code.
Hope it helps. Revert for any doubts/clarifications.
let modalId = "";
function openModal(id) {
document.getElementById(id).style.display = "block";
modalId = id;
}
function closeModal(id) {
document.getElementById(id).style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
if (!document.getElementById(modalId)) return;
var i;
var slides = document.getElementById(modalId).getElementsByClassName("mySlides");
// for (var i = 0; i < slides.length; i++) {
// slides[i].style.display = "none";
// }
var dots = document.getElementsByClassName("demo", "demo1");
// for (var i = 0; i < dots.length; i++) {
// dots[i].style.display = "block";
// }
var captionText = document.getElementById("caption", "caption1");
// for (var i = 0; i < captionText.length; i++) {
// captionText[i].style.display = "block";
// }
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;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.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 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.mySlides1.mySlides2 {
display: none;
}
.cursor {
cursor: pointer;
}
/* 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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: rgb(10, 10, 10);
padding: 2px 16px;
color: white;
}
.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);
}
<h2 style="text-align:center">Lightbox1</h2>
<!-- this for lightbox 1 -->
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="openModal('myModal1');currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="openModal('myModal1');currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="openModal('myModal1');currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="openModal('myModal1');currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal('myModal1')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end lightbox1 -->
<br>
<br>
<br>
<!-- this for lighbox2 -->
<h2 style="text-align:center">Lightbox2</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="openModal('myModal2');currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="openModal('myModal2');currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="openModal('myModal2');currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="openModal('myModal2');currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal('myModal2')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption1"></p>
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end ligtbox2 -->
<br>
<br>
<br>
<!-- this ligtbox3 -->
<h2 style="text-align:center">Lightbox3</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="openModal('myModal3');currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="openModal('myModal3');currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="openModal('myModal3');currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="openModal('myModal3');currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal3" class="modal">
<span class="close cursor" onclick="closeModal('myModal3')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption2"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end lightbox3 -->

this is what i mean want.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.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 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;
}
.mySlides1.mySlides2.mySlides3 {
display: none;
}
.cursor {
cursor: pointer;
}
/* 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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: rgb(10, 10, 10);
padding: 2px 16px;
color: white;
}
.demo1.demo2.demo3 {
opacity: 0.6;
}
.active,
.demo1.demo2.demo3: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>
<body>
<h2 style="text-align:center">Lightbox1</h2>
<!-- this for lightbox 1 -->
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="openModal1();currentSlide1(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="openModal1();currentSlide1(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="openModal1();currentSlide1(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="openModal1();currentSlide1(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal1()">×</span>
<div class="modal-content">
<div class="mySlides1">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 4</div>
<img id="ok2" src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides1(-1)">❮</a>
<a class="next" onclick="plusSlides1(1)">❯</a>
<div class="caption-container">
<p id="caption1"></p>
</div>
<div class="column">
<img id="ok1" class="demo1 cursor" src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="currentSlide1(1)" alt="kui1">
</div>
<div class="column">
<img id="ok2" class="demo1 cursor" src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="currentSlide1(2)" alt="Snow1">
</div>
<div class="column">
<img id="ok3" class="demo1 cursor" src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="currentSlide1(3)" alt="Mountains1">
</div>
<div class="column">
<img id="ok4" class="demo1 cursor" src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="currentSlide1(4)" alt="Northern1">
</div>
</div>
</div>
<!-- end lightbox1 -->
<br>
<br>
<br>
<!-- this for lighbox2 -->
<h2 style="text-align:center">Lightbox2</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="openModal2();currentSlide2(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="openModal2();currentSlide2(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="openModal2();currentSlide2(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="openModal2();currentSlide2(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal2()">×</span>
<div class="modal-content">
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides2(-1)">❮</a>
<a class="next" onclick="plusSlides2(1)">❯</a>
<div class="caption-container">
<p id="caption2"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="currentSlide2(1)" alt="Nature2">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="currentSlide2(2)" alt="Snow2">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="currentSlide2(3)" alt="Mountai2">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="currentSlide2(4)" alt="Northern2">
</div>
</div>
</div>
<!-- end ligtbox2 -->
<br>
<br>
<br>
<!-- this ligtbox3 -->
<h2 style="text-align:center">Lightbox3</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="openModal3();currentSlide3(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="openModal3();currentSlide3(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="openModal3();currentSlide3(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="openModal3();currentSlide3(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal3" class="modal">
<span class="close cursor" onclick="closeModal3()">×</span>
<div class="modal-content">
<div class="mySlides3">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides3(-1)">❮</a>
<a class="next" onclick="plusSlides3(1)">❯</a>
<div class="caption-container">
<p id="caption3"></p>
</div>
<div class="column">
<img class="demo3 cursor" src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="currentSlide3(1)" alt="Nature3">
</div>
<div class="column">
<img class="demo3 cursor" src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="currentSlide3(2)" alt="Snow3">
</div>
<div class="column">
<img class="demo3 cursor" src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="currentSlide3(3)" alt="Mountains3">
</div>
<div class="column">
<img class="demo3 cursor" src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="currentSlide3(4)" alt="Northern3">
</div>
</div>
</div>
<!-- end lightbox3 -->
<!-- javascipt,html,and css from w3school -->
<script>
// for lighbox1
function openModal1() {
document.getElementById("myModal1").style.display = "block";
}
function closeModal1() {
document.getElementById("myModal1").style.display = "none";
}
// -------------------------
var slideIndex1 = 1;
showSlides1(slideIndex1);
function plusSlides1(n) {
showSlides1(slideIndex1 += n);
}
function currentSlide1(n) {
showSlides1(slideIndex1 = n);
}
// lighbox1
function showSlides1(n) {
var i;
var slides1 = document.getElementsByClassName("mySlides1");
var dots1 = document.getElementsByClassName("demo1");
var captionText1 = document.getElementById("caption1");
var x1 = document.getElementById("ok1").alt;
var x2 = document.getElementById("ok2").alt;
var x3 = document.getElementById("ok3").alt;
var x4 = document.getElementById("ok4").alt;
// lighbox 1
if (n > slides1.length) {slideIndex1 = 1}
if (n < 1) {slideIndex1 = slides1.length}
for (i = 0; i < slides1.length; i++) {
slides1[i].style.display = "none";
}
for (i = 0; i < dots1.length; i++) {
dots1[i].className = dots1[i].className.replace(" active", "");
}
slides1[slideIndex1-1].style.display = "block";
dots1[slideIndex1-1].className += " active";
captionText1.innerHTML = dots1[slideIndex1-1].alt;
}
// ---------------------------------------
// =======================================
// ---------------------------------------
// ---------------------------------------
// =======================================
// for lighbox2
function openModal2() {
document.getElementById("myModal2").style.display = "block";
}
function closeModal2() {
document.getElementById("myModal2").style.display = "none";
}
// --------------------
var slideIndex2 = 1;
showSlides2(slideIndex2);
function plusSlides2(u) {
showSlides2(slideIndex2 += u);
}
function currentSlide2(u) {
showSlides2(slideIndex2 = u);
}
// lighbox2
function showSlides2(u){
var j;
var slides2 = document.getElementsByClassName("mySlides2");
var dots2 = document.getElementsByClassName("demo2");
var captionText2 = document.getElementById("caption2");
// lighbox 2
if (u > slides2.length) {slideIndex2 = 1}
if (u < 1) {slideIndex2 = slides2.length}
for (j = 0; j < slides2.length; j++) {
slides2[j].style.display = "none";
}
for (j = 0; j < dots2.length; j++) {
dots2[j].className = dots2[j].className.replace(" active", "");
}
slides2[slideIndex2-1].style.display = "block";
dots2[slideIndex2-1].className += " active";
captionText2.innerHTML = dots2[slideIndex2-1].alt;
}
// ---------------------------------------
// ---------------------------------------
// =======================================
// for lighbox3
function openModal3() {
document.getElementById("myModal3").style.display = "block";
}
function closeModal3() {
document.getElementById("myModal3").style.display = "none";
}
// --------------------
var slideIndex3 = 1;
showSlides3(slideIndex3);
function plusSlides3(p) {
showSlides3(slideIndex3 += p);
}
function currentSlide3(p) {
showSlides3(slideIndex3 = p);
}
// lighbox3
function showSlides3(p){
var k;
var slides3 = document.getElementsByClassName("mySlides3");
var dots3 = document.getElementsByClassName("demo3");
var captionText3 = document.getElementById("caption3");
// lighbox 3
if (p > slides3.length) {slideIndex3 = 1}
if (p < 1) {slideIndex3 = slides3.length}
for (k = 0; k < slides3.length; k++) {
slides3[k].style.display = "none";
}
for (k = 0; k < dots3.length; k++) {
dots3[k].className = dots3[k].className.replace(" active", "");
}
slides3[slideIndex3-1].style.display = "block";
dots3[slideIndex3-1].className += " active";
captionText3.innerHTML = dots3[slideIndex3-1].alt;
}
</script>
</body>
</html>

Multiple Lightbox (Modal Image Gallery) on 1 page

I would like to create a lightbox effect without downloading anything. I found a nice solution using Modal/Slideshow as a lightbox and it works well. I would like to have more than 1 on a page and can't get it to work. Here is a link to the example and all the code is below.
https://www.w3schools.com/howto/howto_js_lightbox.asp
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.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 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;
}
.cursor {
cursor: pointer
}
/* 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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.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>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<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="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<script>
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;
}
</script>
</body>
</html>

Try if u are using bootstrap
HTML
<div class="container">
<div class="row">
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
</div>
<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="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(4)">
</div>
</div>
</div>
</div>
CSS
.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 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)
}
JS
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;
}

I have a partial answer because I am working on the same concept (multiple lightboxes on one page) and used the same example code! It's partial because mine still has a couple issues, (the captions for the second lightbox aren't coming through yet and the "active" image stays opaque in the demo area for the second lightbox also.)
Hopefully someone can improve on what I've done!
What I found was that I needed to copy the JS and rename the functions for the second lightbox, then make sure you call the copied & renamed version for the second lightbox:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
.demo, .demo2 {
opacity: 0.6;
margin-top: 1px;
}
.mySlides, .mySlides2 {
display: none;
}
</script>
<body>
<h2 style="text-align:center">Lightbox</h2>
<!-- First lightbox -->
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<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="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- Second lightbox -->
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal2()">×</span>
<div class="modal-content">
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img src="img/farm1Slice.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides2(-1)">❮</a>
<a class="next" onclick="plusSlides2(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide2(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo2 cursor" src="img_fjords_wide.jpg" style="width:100%" onclick="currentSlide2(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo2 cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide2(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo2 cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide2(4)" alt="Northern Lights">
</div>
</div>
</div>
<script>
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;
}
</script>
<!--Second lightbox code -->
<script>
function openModal2() {
document.getElementById('myModal2').style.display = "block";
}
function closeModal() {
document.getElementById('myModal2').style.display = "none";
}
var slideIndex = 1;
showSlides2(slideIndex);
function plusSlides2(n) {
showSlides2(slideIndex += n);
}
function currentSlide2(n) {
showSlides2(slideIndex = n);
}
function showSlides2(n) {
var i;
var slides = document.getElementsByClassName("mySlides2");
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;
}
</script>
</body>
</html>

Javascript responsive image gallery thumbnail

I need to do a responsive image thumbnail gallery and mine currently looks like this the one you can see in the snippet.
Since I must have 30 images showing, Is there a way a can make my code more efficient so that I dont have to repeat images all the time?
Unfortunately I cannot use plugins but I am free to use jQuery.
You can check my pen here
My html and css look like this:
HTML:
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<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="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
CSS:
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.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 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;
}
.cursor {
cursor: pointer
}
/* 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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.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)
}

You are going to have to have the image elements one way or another, so that shouldn't be your focus. But, there certainly are other things you can do to reduce redundancy, separate the content, presentation and behavior and provide yourself a better way to scale and debug the page as time goes on.
First, instead of applying inline styles to elements, use CSS selectors to reduce redundancy and separate the content from the presentation.
Also, while static HTML doesn't use any of the JavaScript runtime's power, you can automate the application of those classes as well as the setting up of the click event handlers (which shouldn't be done with inline HTML event handling attributes anyway) with JavaScript. This won't eliminate having all the image elements, but it will decrease the redundancy of that code.
A couple of other things... Some of your HTML is invalid as some of your image elements don't have the required alt attribute to provide an alternate text description for those who use screen reader software or otherwise can't see the images.
Lastly, it looks like many of your image paths have a trailing space as part of the attribute value.
// Place all of this code into a <script></script> element and place that element
// just before the closing of the <body> element (</body>) so that by the time
// the script is reached, all the HTML will have already been parsed into memory.
// Get references to the elements you need to work with:
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var close = document.querySelector(".close");
// Get a node list of the sets of images and turn the node list into a proper array
var columnImages1 = Array.prototype.slice.call(document.querySelectorAll("div.row > div.colum > img.hover-shadow.cursor"));
var columnImages2 = Array.prototype.slice.call(document.querySelectorAll("div.column > img.demo"));
// Loop over the first group of images and set up their click event handlers
columnImages1.forEach(function(img, index){
img.addEventListener("click", function(){
openModal();
currentSlide(index + 1);
});
});
// Loop over the second group of images and set up their click event handlers
columnImages1.forEach(function(img, index){
img.addEventListener("click", function(){
currentSlide(index + 1);
});
});
// Set up the click event handler for the close, previous and next buttons
close.addEventListener("click", closeModal);
prev.addEventListener("click", function(){ plusSlides(-1) });
next.addEventListener("click", function(){ plusSlides(1) });
* { box-sizing: border-box; }
body {
font-family: Verdana, sans-serif;
margin: 0;
}
/* This will eliminate the need to repeat "width:100%" on all your slides */
.mySlides > img, .column > img { width: 100%; }
.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;
}
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here"
class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here"
class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here"
class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here"
class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Northern Lights">
</div>
</div>
</div>

How to apply the same function to multiple ID's?

I am trying to create a lightbox for my webpage. I am currently following W3schools example of the lightbox: http://www.w3schools.com/howto/howto_js_lightbox.asp
If it helps, the webpage I'm current working on is here: http://students.washington.edu/cdm206k/tinfo230/assign5/multiplayer/multiWeapons.html
I am now able to create multiple lightboxes with the help of S.Serp!
However, now, I need help showing the caption for each image for all lightboxes. I've tried to create different unique caption ID but it only deletes the caption for each images from the first lightbox and allow the second lightbox to have the captions.
Sub Machines:
[img 1] [img 2] [img 3] [img 4] [img 5]
Assault Rifles:
[img 1] [img 2] [img 3] [img 4] [img 5] <-- I want to make another lightbox for this.
...... and maybe 3 more subsections.
I have created a copy of the first lightbox but there seems to be an interference with the first lightbox and the second lightbox. My problem is that whenever I verify the page, it tells me that I have multiple ID's.
The first one is for the myModal. I've tried using a different name for the id but it still doesn't apply the same function to the second id. The same thing happens for the id captions.
I hope it's not confusing. Any recommendation or help is appreciated. Thank you.
HTML:
<h1> Black Ops 3 III - Weapons </h1>
<h2> Primary </h2>
<h3>Submachines: </h3>
<section class="row">
<section class="column">
<img src="../multiplayer/weapons/primary/kuda.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(1)" class="hover-shadow cursor" alt="Primary: Kuda">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/weevil.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(2)" class="hover-shadow cursor" alt="Primary: Weevil">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/vesper.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(3)" class="hover-shadow cursor" alt="Primary: Vesper">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/pharo.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(4)" class="hover-shadow cursor" alt="Primary: Pharo">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/razorback.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(5)" class="hover-shadow cursor" alt="Primary: Razorback" >
</section>
</section>
<section id="myModal" class="modal">
<span class="close cursor" onclick="closeModal('myModal')">×</span>
<section class="modal-content">
<section class="mySlides">
<section class="numbertext">1 / 5</section>
<img src="../multiplayer/weapons/primary/kuda.jpg" style="width:100%" alt="Primary: Kuda" >
</section>
<section class="mySlides">
<section class="numbertext">2 / 5</section>
<img src="../multiplayer/weapons/primary/weevil.jpg" style="width:100%" alt="Primary: Weevil" >
</section>
<section class="mySlides">
<section class="numbertext">3 / 5</section>
<img src="../multiplayer/weapons/primary/vesper.jpg" style="width:100%" alt="Primary: Vesper" >
</section>
<section class="mySlides">
<section class="numbertext">4 / 5</section>
<img src="../multiplayer/weapons/primary/pharo.jpg" style="width:100%" alt="Primary: Pharo" >
</section>
<section class="mySlides">
<section class="numbertext">5 / 5</section>
<img src="../multiplayer/weapons/primary/razorback.jpg" style="width:100%" alt="Primary: Razorback" >
</section>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<section class="caption-container">
<p id="caption"></p>
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/kuda.jpg" style="width:100%" alt="Primary: Kuda" onclick="currentSlide(1)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/weevil.jpg" style="width:100%" alt="Primary: Weevil" onclick="currentSlide(2)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/vesper.jpg" style="width:100%" alt="Primary: Vesper" onclick="currentSlide(3)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/pharo.jpg" style="width:100%" alt="Primary: Pharo" onclick="currentSlide(4)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/razorback.jpg" style="width:100%" alt="Primary: Razorback" onclick="currentSlide(5)" >
</section>
</section>
</section>
<hr /> ----------------------------------------------- <hr />
<h3>Assault Rifles: </h3>
<section class="row">
<section class="column">
<img src="../multiplayer/weapons/primary/kn44.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(1)" class="hover-shadow cursor" alt="Primary: KN-44">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/xr2.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(2)" class="hover-shadow cursor" alt="Primary: XR-2">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/hvk30.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(3)" class="hover-shadow cursor" alt="Primary: HVK-30">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/icr1.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(4)" class="hover-shadow cursor" alt="Primary: ICR-1">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/manowar.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(5)" class="hover-shadow cursor" alt="Primary: Man-O-War" >
</section>
<p></p>
<section class="column">
<img src="../multiplayer/weapons/primary/sheiva.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(6)" class="hover-shadow cursor" alt="Primary: Sheiva" >
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/m8a7.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(7)" class="hover-shadow cursor" alt="Primary: M8A7" >
</section>
</section>
<section id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal('myModal1')">×</span>
<section class="modal-content">
<section class="mySlides">
<section class="numbertext">1 / 7</section>
<img src="../multiplayer/weapons/primary/kn44.jpg" style="width:100%" alt="Primary: KN-44" >
</section>
<section class="mySlides">
<section class="numbertext">2 / 7</section>
<img src="../multiplayer/weapons/primary/xr2.jpg" style="width:100%" alt="Primary: XR-2" >
</section>
<section class="mySlides">
<section class="numbertext">3 / 7</section>
<img src="../multiplayer/weapons/primary/hvk30.jpg" style="width:100%" alt="Primary: HVK-30" >
</section>
<section class="mySlides">
<section class="numbertext">4 / 7</section>
<img src="../multiplayer/weapons/primary/icr1.jpg" style="width:100%" alt="Primary: ICR-1" >
</section>
<section class="mySlides">
<section class="numbertext">5 / 7</section>
<img src="../multiplayer/weapons/primary/manowar.jpg" style="width:100%" alt="Primary: Man-O-War" >
</section>
<section class="mySlides">
<section class="numbertext">6 / 7</section>
<img src="../multiplayer/weapons/primary/sheiva.jpg" style="width:100%" alt="Primary: Sheiva" >
</section>
<section class="mySlides">
<section class="numbertext">7 / 7</section>
<img src="../multiplayer/weapons/primary/m8a7.jpg" style="width:100%" alt="Primary: M8A7" >
</section>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<section class="caption-container">
<p id="caption"></p>
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/kn44.jpg" style="width:100%" alt="Primary: KN-44" onclick="currentSlide(1)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/xr2.jpg" style="width:100%" alt="Primary: XR-2" onclick="currentSlide(2)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/hvk30.jpg" style="width:100%" alt="Primary: HVK-30" onclick="currentSlide(3)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/icr1.jpg" style="width:100%" alt="Primary: ICR-1" onclick="currentSlide(4)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/manowar.jpg" style="width:100%" alt="Primary: Man-O-War" onclick="currentSlide(5)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/sheiva.jpg" style="width:100%" alt="Primary: Sheiva" onclick="currentSlide(6)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/m8a7.jpg" style="width:100%" alt="Primary: M8A7" onclick="currentSlide(7)" >
</section>
</section>
</section>
Javascript:
<script>
var modalSec;
function openModal(id) {
modalSec = document.getElementById('id');
modalSec.style.display = "block";
}
function closeModal(id) {
modalSec.style.display = "none";
}
var slideIndex = 1;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = modalSec.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;
}
</script>
CSS:
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 20%;
}
/* 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;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* 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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.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)
}

When you have more than just one modal sections, you have to pass the id of modal divs to javascript functions. the sample you mention in w3school will be as following:
The changes are:
» for first section ('myModal'):
<img ... onclick="openModal('myModal'); currentSlide(1)">
...
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal('myModal')">×</span>
...
» for second section ('myModal2'):
<img ... onclick="openModal('myModal2'); currentSlide(1)">
...
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal('myModal2')">×</span>
...
» the javascript changes:
var modalDiv; //new variable to store current modal div
function openModal(id) {
modalDiv = document.getElementById(id); //keep it in our var
modalDiv.style.display = "block";
}
function closeModal(id) {
modalDiv.style.display = "none"; //use modalDiv var here!
}
var slideIndex = 1;
//showSlides(slideIndex); //remove this line, its an error!!
...
function showSlides(n) {
var i;
var slides = modalDiv.getElementsByClassName("mySlides"); //use modalDiv var here!
var dots = modalDiv.getElementsByClassName("demo"); //modified to get proper demo images
var captionText = modalDiv.getElementsByClassName("caption-container")[0].children[0]; //modified to get proper caption
...
The full code will be as following snippet (see in [Full page] view):
var modalDiv;
function openModal(id) {
modalDiv = document.getElementById(id);
modalDiv.style.display = "block";
}
function closeModal(id) {
modalDiv.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 = modalDiv.getElementsByClassName("mySlides");
var dots = modalDiv.getElementsByClassName("demo");
var captionText = modalDiv.getElementsByClassName("caption-container")[0].children[0];
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;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.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 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;
}
.cursor {
cursor: pointer;
}
/* 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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.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);
}
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="http://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal('myModal')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="http://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise2">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<hr /> ----------------------------------------------- <hr />
<div class="row">
<div class="column">
<img src="http://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal('myModal2'); currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal('myModal2'); currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal('myModal2'); currentSlide(3)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal('myModal2')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise2">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway2">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords2">
</div>
</div>
</div>

Use class modal to apply javascript to multiple elements
id is for single element which is unique

function openModal() {
var a = document.querySelectorAll('.modal');
var i = 0;
while ( i<a.length){
a[i].style.display = "block";
i++;
}
}
function closeModal() {
var a = document.querySelectorAll('.modal');
var i = 0;
while ( i<a.length){
a[i].style.display = "none";
i++;
}
}
Use this instead.

You could cut down on the markup and code and make it more easily expandable in the future by using event delegation and a single modal element instead of hard-coding an event to each element.
Much slimmer HTML:
<div id="modal">
<img class="modal-image">
<div class="modal-button modal-close">×</div>
<div class="modal-button modal-prev">❮</div>
<div class="modal-button modal-next">❯</div>
<div class="modal-counter"></div>
</div>
<h3>Submachines:</h3>
<div class="weapons">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=Kuda" alt="Primary: Kuda">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=Weevil" alt="Primary: Weevil">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=Vesper" alt="Primary: Vesper">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=Pharo" alt="Primary: Pharo">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=Razorback" alt="Primary: Razorback" >
</div>
<h3>Assault Rifles:</h3>
<div class="weapons">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=KN-44" alt="Primary: KN-44">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=XR-2" alt="Primary: XR-2">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=HVK-30" alt="Primary: HVK-30">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=ICR-1" alt="Primary: ICR-1">
<img src="https://dummyimage.com/200x100/000000/fff.png&text=Man-O-War" alt="Primary: Man-O-War" >
<img src="https://dummyimage.com/200x100/000000/fff.png&text=Sheiva" alt="Primary: Sheiva" >
<img src="https://dummyimage.com/200x100/000000/fff.png&text=M8A7" alt="Primary: M8A7" >
</div>
JS:
"use strict";
var modal = document.getElementById('modal'),
modalImage = document.querySelector('.modal-image'),
modalCounter = document.querySelector('.modal-counter');
document.querySelectorAll('.weapons').forEach(function (weaponCollection) {
// this uses the spread operator (...) to convert the nodeList into
// a real array. Most recent versions of modern browsers support this
// (IE11 doesn't but it is not a recent browser, Edge does). You can
// convert a nodeList in an ES5 friendly way if you need to...
var weapons = [...weaponCollection.querySelectorAll('img')],
totalWeapons = weapons.length;
weaponCollection.addEventListener('click', function (evt) {
var target = evt.target,
weaponNumber = weapons.indexOf(target) + 1;
// if the item that was clicked was one of the image tags
if (target.tagName === 'IMG') {
modalImage.src = target.src;
modalCounter.textContent = weaponNumber + ' / ' + totalWeapons;
modal.classList.add('show');
}
}, false);
});
function closeModal () {
modal.classList.remove('show');
}
document.querySelector('.modal-close').addEventListener('click', closeModal, false);
JSFiddle example
I didn't implemented the next and prev buttons because it is late and I am tired. I just wanted to show how event delegation can make this kind of thing much less verbose. Implementing the prev and next buttons would probably require some refactoring, I might update the example later. I'll also mention that if you are not adverse to using jQuery, I'm sure there are plenty of ready built plugins that will do this sort of thing for you.