I'm still a newbie when it comes to javascript, so I don't know yet how to optimize this code.
customize.js
// Get the modal
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
var modal3 = document.getElementById('myModal3');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img1");
var captionText = document.getElementById("caption");
var img2 = document.getElementById('myImg2');
var modalImg2 = document.getElementById("img2");
var captionText2 = document.getElementById("caption2");
var img3 = document.getElementById('myImg3');
var modalImg3 = document.getElementById("img3");
var captionText3 = document.getElementById("caption3");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img2.onclick = function(){
modal2.style.display = "block";
modalImg2.src = this.src;
captionText2.innerHTML = this.alt;
}
img3.onclick = function(){
modal3.style.display = "block";
modalImg3.src = this.src;
captionText3.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];
var span3 = document.getElementsByClassName("close")[2];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function(){
modal2.style.display = "none";
}
span3.onclick = function(){
modal3.style.display = "none";
}
And this how my html looks like
HTML
<li class="one-third animate-box" data-animate-effect="fadeIn">
<img id="myImg" src="images/Images/gallery-1.jpg" alt="Ash Image Gallery 1" height="100%" width="100%">
</li>
<li class="one-third animate-box" data-animate-effect="fadeIn">
<img id="myImg2" src="images/Images/gallery-2.jpg" alt="Ash Image Gallery 2" height="100%" width="100%">
</li>
<li class="one-third animate-box" data-animate-effect="fadeIn" >
<img id="myImg3" src="images/Images/gallery-3.jpg" alt="Ash Image Gallery 3" height="100%" width="100%">
</li>