Javascript responsive image gallery thumbnail

Javascript responsive image gallery thumbnail - javascript

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>

Related

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 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 */
}

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>

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.

We Keep Coding

JavaScript is the programming language of the Web.

Javascript responsive image gallery thumbnail - javascript

Related

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

multiple image galleries on one page

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

Multiple Lightbox (Modal Image Gallery) on 1 page

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

Categories

Resources