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

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

Related

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

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

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

More than one slideshows on one page

I'm trying to add multiple slideshows to one page but am having some difficulty. I can add two functioning slideshows but when I add a third everything breaks.
Can someone please suggest a solution to add multiple slideshows to one page?
Here is the codepen: https://codepen.io/anon/pen/YmWNqMc
HTML:
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)"></a>
<a class="next" onclick="plusSlides(1, 0)"></a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="https://www.w3schools.com/howto/img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://www.w3schools.com/howto/img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://www.w3schools.com/howto/img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)"></a>
<a class="next" onclick="plusSlides(1, 1)"></a>
</div>
CSS:
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 4%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
height:100%;
width:49.5%;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
color: black;
}
JAVASCRIPT:
var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}

Updated your code and 3 slideshows can run easily.
You just have to adapt your js code (like I did);
Add class name of the 3rd slideshow,
Call showSlides(1, id);.
var slideIndex = [1,1,1];
var slideId = ["slide", "slide2", "slide3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
* {box-sizing: border-box}
.mySlides{display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 4%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
height:100%;
width:49.5%;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
color: black;
}
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides slide">
<img src="https://picsum.photos/150/150" style="width:100%">
</div>
<div class="mySlides slide">
<img src="https://picsum.photos/150/151" style="width:100%">
</div>
<div class="mySlides slide">
<img src="https://picsum.photos/151/150" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">prev</a>
<a class="next" onclick="plusSlides(1, 0)">next</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides slide2">
<img src="https://picsum.photos/152/150" style="width:100%">
</div>
<div class="mySlides slide2">
<img src="https://picsum.photos/150/152" style="width:100%">
</div>
<div class="mySlides slide2">
<img src="https://picsum.photos/150/154" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">prev</a>
<a class="next" onclick="plusSlides(1, 1)">next</a>
</div>
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides slide3">
<img src="https://picsum.photos/152/151" style="width:100%">
</div>
<div class="mySlides slide3">
<img src="https://picsum.photos/151/152" style="width:100%">
</div>
<div class="mySlides slide3">
<img src="https://picsum.photos/151/154" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">prev</a>
<a class="next" onclick="plusSlides(1, 2)">next</a>
</div>

Multiple Lightbox (Modal Image Gallery) on 1 page

I would like to create a lightbox effect without downloading anything. I found a nice solution using Modal/Slideshow as a lightbox and it works well. I would like to have more than 1 on a page and can't get it to work. Here is a link to the example and all the code is below.
https://www.w3schools.com/howto/howto_js_lightbox.asp
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>

Try if u are using bootstrap
HTML
<div class="container">
<div class="row">
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(4)">
</div>
</div>
</div>
</div>
CSS
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
JS
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}

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

Javascript responsive image gallery thumbnail

I need to do a responsive image thumbnail gallery and mine currently looks like this the one you can see in the snippet.
Since I must have 30 images showing, Is there a way a can make my code more efficient so that I dont have to repeat images all the time?
Unfortunately I cannot use plugins but I am free to use jQuery.
You can check my pen here
My html and css look like this:
HTML:
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
CSS:
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

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

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

I am trying to create a lightbox for my webpage. I am currently following W3schools example of the lightbox: http://www.w3schools.com/howto/howto_js_lightbox.asp
If it helps, the webpage I'm current working on is here: http://students.washington.edu/cdm206k/tinfo230/assign5/multiplayer/multiWeapons.html
I am now able to create multiple lightboxes with the help of S.Serp!
However, now, I need help showing the caption for each image for all lightboxes. I've tried to create different unique caption ID but it only deletes the caption for each images from the first lightbox and allow the second lightbox to have the captions.
Sub Machines:
[img 1] [img 2] [img 3] [img 4] [img 5]
Assault Rifles:
[img 1] [img 2] [img 3] [img 4] [img 5] <-- I want to make another lightbox for this.
...... and maybe 3 more subsections.
I have created a copy of the first lightbox but there seems to be an interference with the first lightbox and the second lightbox. My problem is that whenever I verify the page, it tells me that I have multiple ID's.
The first one is for the myModal. I've tried using a different name for the id but it still doesn't apply the same function to the second id. The same thing happens for the id captions.
I hope it's not confusing. Any recommendation or help is appreciated. Thank you.
HTML:
<h1> Black Ops 3 III - Weapons </h1>
<h2> Primary </h2>
<h3>Submachines: </h3>
<section class="row">
<section class="column">
<img src="../multiplayer/weapons/primary/kuda.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(1)" class="hover-shadow cursor" alt="Primary: Kuda">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/weevil.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(2)" class="hover-shadow cursor" alt="Primary: Weevil">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/vesper.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(3)" class="hover-shadow cursor" alt="Primary: Vesper">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/pharo.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(4)" class="hover-shadow cursor" alt="Primary: Pharo">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/razorback.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(5)" class="hover-shadow cursor" alt="Primary: Razorback" >
</section>
</section>
<section id="myModal" class="modal">
<span class="close cursor" onclick="closeModal('myModal')">×</span>
<section class="modal-content">
<section class="mySlides">
<section class="numbertext">1 / 5</section>
<img src="../multiplayer/weapons/primary/kuda.jpg" style="width:100%" alt="Primary: Kuda" >
</section>
<section class="mySlides">
<section class="numbertext">2 / 5</section>
<img src="../multiplayer/weapons/primary/weevil.jpg" style="width:100%" alt="Primary: Weevil" >
</section>
<section class="mySlides">
<section class="numbertext">3 / 5</section>
<img src="../multiplayer/weapons/primary/vesper.jpg" style="width:100%" alt="Primary: Vesper" >
</section>
<section class="mySlides">
<section class="numbertext">4 / 5</section>
<img src="../multiplayer/weapons/primary/pharo.jpg" style="width:100%" alt="Primary: Pharo" >
</section>
<section class="mySlides">
<section class="numbertext">5 / 5</section>
<img src="../multiplayer/weapons/primary/razorback.jpg" style="width:100%" alt="Primary: Razorback" >
</section>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<section class="caption-container">
<p id="caption"></p>
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/kuda.jpg" style="width:100%" alt="Primary: Kuda" onclick="currentSlide(1)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/weevil.jpg" style="width:100%" alt="Primary: Weevil" onclick="currentSlide(2)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/vesper.jpg" style="width:100%" alt="Primary: Vesper" onclick="currentSlide(3)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/pharo.jpg" style="width:100%" alt="Primary: Pharo" onclick="currentSlide(4)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/razorback.jpg" style="width:100%" alt="Primary: Razorback" onclick="currentSlide(5)" >
</section>
</section>
</section>
<hr /> ----------------------------------------------- <hr />
<h3>Assault Rifles: </h3>
<section class="row">
<section class="column">
<img src="../multiplayer/weapons/primary/kn44.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(1)" class="hover-shadow cursor" alt="Primary: KN-44">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/xr2.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(2)" class="hover-shadow cursor" alt="Primary: XR-2">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/hvk30.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(3)" class="hover-shadow cursor" alt="Primary: HVK-30">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/icr1.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(4)" class="hover-shadow cursor" alt="Primary: ICR-1">
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/manowar.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(5)" class="hover-shadow cursor" alt="Primary: Man-O-War" >
</section>
<p></p>
<section class="column">
<img src="../multiplayer/weapons/primary/sheiva.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(6)" class="hover-shadow cursor" alt="Primary: Sheiva" >
</section>
<section class="column">
<img src="../multiplayer/weapons/primary/m8a7.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(7)" class="hover-shadow cursor" alt="Primary: M8A7" >
</section>
</section>
<section id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal('myModal1')">×</span>
<section class="modal-content">
<section class="mySlides">
<section class="numbertext">1 / 7</section>
<img src="../multiplayer/weapons/primary/kn44.jpg" style="width:100%" alt="Primary: KN-44" >
</section>
<section class="mySlides">
<section class="numbertext">2 / 7</section>
<img src="../multiplayer/weapons/primary/xr2.jpg" style="width:100%" alt="Primary: XR-2" >
</section>
<section class="mySlides">
<section class="numbertext">3 / 7</section>
<img src="../multiplayer/weapons/primary/hvk30.jpg" style="width:100%" alt="Primary: HVK-30" >
</section>
<section class="mySlides">
<section class="numbertext">4 / 7</section>
<img src="../multiplayer/weapons/primary/icr1.jpg" style="width:100%" alt="Primary: ICR-1" >
</section>
<section class="mySlides">
<section class="numbertext">5 / 7</section>
<img src="../multiplayer/weapons/primary/manowar.jpg" style="width:100%" alt="Primary: Man-O-War" >
</section>
<section class="mySlides">
<section class="numbertext">6 / 7</section>
<img src="../multiplayer/weapons/primary/sheiva.jpg" style="width:100%" alt="Primary: Sheiva" >
</section>
<section class="mySlides">
<section class="numbertext">7 / 7</section>
<img src="../multiplayer/weapons/primary/m8a7.jpg" style="width:100%" alt="Primary: M8A7" >
</section>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<section class="caption-container">
<p id="caption"></p>
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/kn44.jpg" style="width:100%" alt="Primary: KN-44" onclick="currentSlide(1)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/xr2.jpg" style="width:100%" alt="Primary: XR-2" onclick="currentSlide(2)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/hvk30.jpg" style="width:100%" alt="Primary: HVK-30" onclick="currentSlide(3)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/icr1.jpg" style="width:100%" alt="Primary: ICR-1" onclick="currentSlide(4)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/manowar.jpg" style="width:100%" alt="Primary: Man-O-War" onclick="currentSlide(5)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/sheiva.jpg" style="width:100%" alt="Primary: Sheiva" onclick="currentSlide(6)" >
</section>
<section class="column">
<img class="demo cursor" src="../multiplayer/weapons/primary/m8a7.jpg" style="width:100%" alt="Primary: M8A7" onclick="currentSlide(7)" >
</section>
</section>
</section>
Javascript:
<script>
var modalSec;
function openModal(id) {
modalSec = document.getElementById('id');
modalSec.style.display = "block";
}
function closeModal(id) {
modalSec.style.display = "none";
}
var slideIndex = 1;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = modalSec.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
CSS:
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 20%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

When you have more than just one modal sections, you have to pass the id of modal divs to javascript functions. the sample you mention in w3school will be as following:
The changes are:
» for first section ('myModal'):
<img ... onclick="openModal('myModal'); currentSlide(1)">
...
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal('myModal')">×</span>
...
» for second section ('myModal2'):
<img ... onclick="openModal('myModal2'); currentSlide(1)">
...
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal('myModal2')">×</span>
...
» the javascript changes:
var modalDiv; //new variable to store current modal div
function openModal(id) {
modalDiv = document.getElementById(id); //keep it in our var
modalDiv.style.display = "block";
}
function closeModal(id) {
modalDiv.style.display = "none"; //use modalDiv var here!
}
var slideIndex = 1;
//showSlides(slideIndex); //remove this line, its an error!!
...
function showSlides(n) {
var i;
var slides = modalDiv.getElementsByClassName("mySlides"); //use modalDiv var here!
var dots = modalDiv.getElementsByClassName("demo"); //modified to get proper demo images
var captionText = modalDiv.getElementsByClassName("caption-container")[0].children[0]; //modified to get proper caption
...
The full code will be as following snippet (see in [Full page] view):
var modalDiv;
function openModal(id) {
modalDiv = document.getElementById(id);
modalDiv.style.display = "block";
}
function closeModal(id) {
modalDiv.style.display = "none";
}
var slideIndex = 1;
//showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = modalDiv.getElementsByClassName("mySlides");
var dots = modalDiv.getElementsByClassName("demo");
var captionText = modalDiv.getElementsByClassName("caption-container")[0].children[0];
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="http://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal('myModal')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="http://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise2">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<hr /> ----------------------------------------------- <hr />
<div class="row">
<div class="column">
<img src="http://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal('myModal2'); currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal('myModal2'); currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal('myModal2'); currentSlide(3)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal('myModal2')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise2">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway2">
</div>
<div class="column">
<img class="demo cursor" src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords2">
</div>
</div>
</div>

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

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

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

Categories