ive try any single way to make multiple box of lightbox in one page,ive replace each possible class and variable,but the image on lighbox 1,and 2 doesnt appears,or vice versa.ive try another way to solve this by read any program on internet,but ive to try more to make this project cause this project has taken 3 days.
// for lighbox1
function openModal() {
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal1").style.display = "none";
}
// -------------------------
var slideIndex1 = 1;
showSlides(slideIndex1);
function plusSlides(n) {
showSlides(slideIndex1 += n);
}
function currentSlide(n) {
showSlides(slideIndex1 = n);
}
// lighbox1
function showSlides(n) {
var i;
var slides1 = document.getElementsByClassName("mySlides1");
var dots1 = document.getElementsByClassName("demo1");
var captionText1 = document.getElementById("caption1");
// lighbox 1
if (n > slides1.length) {slideIndex1 = 1}
if (n < 1) {slideIndex1 = slides1.length}
for (i = 0; i < slides1.length; i++) {
slides1[i].style.display = "none";
}
for (i = 0; i < dots1.length; i++) {
dots1[i].className = dots1[i].className.replace(" active", "");
}
slides1[slideIndex1-1].style.display = "block";
dots1[slideIndex1-1].className += " active";
captionText1.innerHTML = dots1[slideIndex1-1].alt;
}
// ---------------------------------------
// =======================================
// for lighbox2
function openModal() {
document.getElementById("myModal2").style.display = "block";
}
function closeModal() {
document.getElementById("myModal2").style.display = "none";
}
// ---------------------
var slideIndex2 = 1;
showSlides(slideIndex2);
function plusSlides(o) {
showSlides(slideIndex2 += o);
}
function currentSlide(o) {
showSlides(slideIndex2 = o);
}
// lightbox2
function showSlides(o){
var j;
var mySlides2 = document.getElementsByClassName("mySlides2");
var dots2 = document.getElementsByClassName("demo2");
var captionText2 = document.getElementById("caption2");
// lighbox 2
if (o > slides2.length) {slideIndex2 = 1}
if (o < 1) {slideIndex2 = slides2.length}
for (j = 0; j < slides2.length; j++) {
slides2[j].style.display = "none";
}
for (j = 0; j < dots2.length; j++) {
dots2[j].className = dots2[j].className.replace(" active", "");
}
slides2[slideIndex2-1].style.display = "block";
dots2[slideIndex2-1].className += " active";
captionText2.innerHTML = dots2[slideIndex2-1].alt;
}
// ---------------------------------------
// =======================================
// for lighbox3
function openModal() {
document.getElementById("myModal3").style.display = "block";
}
function closeModal() {
document.getElementById("myModal3").style.display = "none";
}
// --------------------
var slideIndex3 = 1;
showSlides(slideIndex3);
function plusSlides(p) {
showSlides(slideIndex3 += p);
}
function currentSlide(p) {
showSlides(slideIndex3 = p);
}
// lighbox3
function showSlides(p){
var k;
var slides3 = document.getElementsByClassName("mySlides3");
var dots3 = document.getElementsByClassName("demo3");
var captionText3 = document.getElementById("caption3");
// lighbox 3
if (p > slides3.length) {slideIndex3 = 1}
if (p < 1) {slideIndex3 = slides3.length}
for (k = 0; k < slides3.length; k++) {
slides3[k].style.display = "none";
}
for (k = 0; k < dots3.length; k++) {
dots3[k].className = dots3[k].className.replace(" active", "");
}
slides3[slideIndex3-1].style.display = "block";
dots3[slideIndex3-1].className += " active";
captionText3.innerHTML = dots3[slideIndex3-1].alt;
}
// ---------------------------------------body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides1.mySlides2.mySlides3 {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: rgb(10, 10, 10);
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}<h2 style="text-align:center">Lightbox1</h2>
<!-- this for lightbox 1 -->
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides1">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/j7xx4uDVoCo/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/ZS67i1HLllo/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/YiX1jsdbWhY/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://source.unsplash.com/jafl5owXXVc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end lightbox1 -->
<br>
<br>
<br>
<!-- this for lighbox2 -->
<h2 style="text-align:center">Lightbox2</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption1"></p>
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/0qvBNep1Y04/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/BfrQnKBulYQ/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/9wTPJmiXk2U/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo1 cursor" src="https://source.unsplash.com/O2MdroNurVw/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end ligtbox2 -->
<br>
<br>
<br>
<!-- this ligtbox3 -->
<h2 style="text-align:center">Lightbox3</h2>
<div class="row">
<div class="column">
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal3" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides3">
<div class="numbertext">1 / 4</div>
<img src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">2 / 4</div>
<img src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">3 / 4</div>
<img src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">4 / 4</div>
<img src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption2"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/gnyA8vd3Otc/1600x900" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/g5jpH62pwes/1600x900" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/JpF58ANavoc/1600x900" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo2 cursor" src="https://source.unsplash.com/mZRCMPbJSPc/1600x900" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<!-- end lightbox3 -->