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 -->
