We Keep Coding

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>

how can I move the next button on the right in the gallery pop to be near the image when each image is a different size

I have been asked to create an image gallery for a test website for a mini project as I am learning about html and css. I have created the gallery and the pop up images based on the code here: http://www.w3schools.com/howto/howto_css_modal_images.asp
When I click on the images, I can see the next and previous arrow buttons however the next button on the right hand side is to the far right when I am trying to move it slightly to the left so that it is inline with the image. Each image is required to be a different size[next button position][1] In this image, I have circled where the next button currently is and then circled in red where I am trying to move it.
Is it possible to amend this code so the the next button is auto aligned regardless of the image size?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* Style the Image Used to Trigger the Modal */
* {
box-sizing: border-box;
margin: 0;
padding: 0 4px;
}
.image-container {
width: 100%;
columns: 4;
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
max-width: 100%;
padding: 1px;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: auto;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Trigger the Modal -->
<div class="image-container">
<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
<img class="myImg" src="https://docs.google.com/uc?export=download&id=1cfqbl28ezKPikIXApzZQOEUPwKm2AKrr" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
<img class="myImg" src="https://docs.google.com/uc?export=download&id=1I-bDFOoYZ-XUZkwDxRJmtiR_7DGVn_Eb" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
<img class="myImg" src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
<img class="myImg" src="https://docs.google.com/uc?export=download&id=10PElUch6-oxpjga6Pe6PoHd2VUXZkUfu" style="width:100%" onclick="openModal();currentSlide(5)" class="hover-shadow cursor">
<img class="myImg" src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" style="width:100%" onclick="openModal();currentSlide(6)" class="hover-shadow cursor">
<img class="myImg" src="https://docs.google.com/uc?export=download&id=1HAh9siwne5Fa39G2qIppry-aHrrFRrzb" style="width:100%" onclick="openModal();currentSlide(7)" class="hover-shadow cursor">
<img class="myImg" src="https://docs.google.com/uc?export=download&id=1TwVoVT9UxlmmQO125b-lD7kbswYqCdgy" style="width:100%" onclick="openModal();currentSlide(8)" class="hover-shadow cursor">
</div> <!-- end image-container div -->
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 8</div>
<img src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 8</div>
<img src="https://docs.google.com/uc?export=download&id=1cfqbl28ezKPikIXApzZQOEUPwKm2AKrr" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 8</div>
<img src="https://docs.google.com/uc?export=download&id=1I-bDFOoYZ-XUZkwDxRJmtiR_7DGVn_Eb" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 8</div>
<img src="https://docs.google.com/uc?export=download&id=1DU-S82guX9KooYyfDavkg1M_kpXAVrs1" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 8</div>
<img src="https://docs.google.com/uc?export=download&id=10PElUch6-oxpjga6Pe6PoHd2VUXZkUfu" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 8</div>
<img src="https://docs.google.com/uc?export=download&id=1U4Z-2GJcRDtIAmZt4ej0MOF_NvA0ntzS" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">7 / 8</div>
<img src="https://docs.google.com/uc?export=download&id=1HAh9siwne5Fa39G2qIppry-aHrrFRrzb" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">8 / 8</div>
<img src="https://docs.google.com/uc?export=download&id=1TwVoVT9UxlmmQO125b-lD7kbswYqCdgy" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
</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>

Yes it is, just add position: relative on .modal-content.
This way, absolute position of your arrows will be relative to the modal container and not the full screen.
Hope it'll help.

multiple image galleries on one page

I know this question must have been come up before, never the less I wanted to ask for your help:
I want add multiple image galleries to my webpage, based on this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox
I think this can be accomplished using different div id tags, but I am not sure how to modify the script.
CSS
/* lightbox */
.row>.column {
padding: 8 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: 20px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.95);
}
/* Modal Content */
.modal-content {
position: relative;
/* background-color: #fefefe; */
margin: auto;
padding: 0;
/* width: 90%; */
max-width: 55%;
/* max-height: 80%; */
}
/* 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;
display: none;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
font-size: 14px;
/* background-color: black; */
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
display: none;
}
.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);
}
html
<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_snow.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_snow_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_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</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>
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;
}
thank you very much!

If you take a look at the script, you can see how it gets each div by its ID: document.getElementById("myModal").style.display = "block"; this line affects the <div id="myModal" class="modal"> part of the html.
Anywhere you want to change the id in the HTML, make sure you address the same ID in the javascript. Easiest way is to run a find all for the id name and change those places.
For classes, it is the same thing. In the script it uses var slides = document.getElementsByClassName("mySlides"); which would affect the html class "mySlides" for <div class="mySlides">

i think i have what you need:
To add a new image in this code just copy and add the followings in the html body.
No need to change the Javascript code.
In the div class="row" add this and change the currentSlide(CHANGE_THIS_NUMBER) number next to the previous:
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(5)"
class="hover-shadow cursor">
</div>
In the div class="myModal" add this and change numbertext based on the amount of your images
<div class="mySlides">
<div class="numbertext">5 / 5 CHANGE THIS TEXT</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
Still in the div class="myModal" add this and change the currentSlide(CHANGE_THIS_NUMBER) number next to the previous:
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%"
onclick="currentSlide(4)" alt="Northern Lights">
</div>
Here an example of the html with a new image:
<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_snow.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>
<!-- -----------------------ADD THIS----------------------------- -->
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(5)" class="hover-shadow cursor">
</div>
<!-- -----------------------ADD THIS----------------------------- -->
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 5</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 5</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 5</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 5</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<!-- -----------------------ADD THIS----------------------------- -->
<div class="mySlides">
<div class="numbertext">5 / 5</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<!-- -----------------------ADD THIS----------------------------- -->
<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_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</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>
<!-- -----------------------ADD THIS----------------------------- -->
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(5)" alt="Northern Lights">
</div>
</div>
<!-- -----------------------ADD THIS----------------------------- -->
</div>

how do i make more than 1 slideshow gallery in html?

I try to make a slideshow gallery for my project, then i found this tutorial https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp it worked actually but only for 1 slideshow gallery, when i try to make the second one, it didn't work like i expected, it doesn't make 2 slideshow gallery my code just make the duplicate of the first one here is my code:
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;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
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;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="pict/paskib1.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="pict/paskib2.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="pict/paskib3.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="pict/paskib4.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="pict/paskib5.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="pict/paskib6.jpeg" 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="row">
<div class="column">
<img class="demo cursor" src="pict/paskib1.jpeg" style="width:100%; height : 37px" onclick="currentSlide(1)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib2.jpeg" style="width:100%" onclick="currentSlide(2)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib3.jpeg" style="width:100%" onclick="currentSlide(3)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib4.jpeg" style="width:100%" onclick="currentSlide(4)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib5.jpeg" style="width:100%" onclick="currentSlide(5)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib6.jpeg" style="width:100%" onclick="currentSlide(5)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
</div>
</div>

You cannot simple duplicate your html code. If you want control each gallery with same javascript code you have to wrap your html gallary into a container element with an unique identfier. Here an idea:
<div id="gallery01">
<!-- Put your html code for gallery here -->
</div>
<div id="gallery02">
<!-- Put your html code for gallery here -->
</div>
Then you have to change your javascript main function so, that you pass theses id.
Example:
function showSlides(currentClickobj, n) {
var containerElement = getParentContainer(currentCklickObj);
var i;
/* Replace in your code `document.' by 'containerElement.' */
var slides = containerElement.getElementsByClassName("mySlides");
var dots =containerElement.getElementsByClassName("demo");
var captionText = containerElement.getElementById("caption");
...
}
Because you don't use jquery you need a function that returns the container element.
getParentContainer(childNode) {
/* Put your code here */
}

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.