Javascript/CSS Lightbox only working for first element? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!How do JavaScript closures work?Deleting array elements in JavaScript - delete vs spliceHow does JavaScript .prototype work?How do I make the first letter of a string uppercase in JavaScript?How to style a <select> dropdown with only CSS?CSS selector for first element with classHow do I remove a particular element from an array in JavaScript?How do CSS triangles work?How can I add new array elements at the beginning of an array in Javascript?Is the recommendation to include CSS before JavaScript invalid?

What is the difference between a "ranged attack" and a "ranged weapon attack"?

What is the origin of 落第?

Flight departed from the gate 5 min before scheduled departure time. Refund options

How to align enumerate environment inside description environment

Tips to organize LaTeX presentations for a semester

Is multiple magic items in one inherently imbalanced?

Is there public access to the Meteor Crater in Arizona?

Trying to understand entropy as a novice in thermodynamics

Is it dangerous to install hacking tools on my private linux machine?

Does the Mueller report show a conspiracy between Russia and the Trump Campaign?

How to ask rejected full-time candidates to apply to teach individual courses?

Monty Hall Problem-Probability Paradox

Should a wizard buy fine inks every time he want to copy spells into his spellbook?

A proverb that is used to imply that you have unexpectedly faced a big problem

In musical terms, what properties are varied by the human voice to produce different words / syllables?

What does it mean that physics no longer uses mechanical models to describe phenomena?

Google .dev domain strangely redirects to https

Caught masturbating at work

How can I save and copy a screenhot at the same time?

Relating to the President and obstruction, were Mueller's conclusions preordained?

Why is a lens darker than other ones when applying the same settings?

What does 丫 mean? 丫是什么意思？

Can you force honesty by using the Speak with Dead and Zone of Truth spells together?

Printing attributes of selection in ArcPy?



Javascript/CSS Lightbox only working for first element?



Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!How do JavaScript closures work?Deleting array elements in JavaScript - delete vs spliceHow does JavaScript .prototype work?How do I make the first letter of a string uppercase in JavaScript?How to style a <select> dropdown with only CSS?CSS selector for first element with classHow do I remove a particular element from an array in JavaScript?How do CSS triangles work?How can I add new array elements at the beginning of an array in Javascript?Is the recommendation to include CSS before JavaScript invalid?



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








6















I am trying to open each of my photos in a Javascript/CSS lightbox upon each of the photos being clicked.



At the moment, only the first photo in my list of photos is opening up in the lightbox. The other photos do not open in the lightbox.



Please can someone explain/show me why this is and explain/show me the correct way of doing this?



Here is my HTML/PHP:



<?php $result4 = $mysqli->query("SELECT * FROM user_data WHERE user_id = $p_id");
 if($result4->num_rows > 0) 
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';

 ?> 

<!-- The Modal -->
<div id="myModal" class="modal">
 <span class="close">&times;</span>
 <img class="modal-content" id="img01">
</div>


CSS:



<style>

#myImg 
 cursor: pointer;
 transition: 0.3s;


#myImg:hover 
 transform: scale(1.09);
 border: 1px solid #a5a5a5;



/* The Modal (background) */
.modal 
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 10; /* 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: 100%;
 max-width: 500px;
 border: 1px solid #f1f1f1;
 border-radius: 0px;



/* Caption of Modal Image */

/* Add Animation */
.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 
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;


.close:hover,
.close:focus 
 color: #bbb;
 text-decoration: none;
 cursor: pointer;


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px)
 .modal-content 
 width: 100%;
 

</style>


Javascript:



 <script>
// Get the modal
var modal = document.getElementById('myModal');

// 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("img01");
img.onclick = function()
 modal.style.display = "block";
 modalImg.src = this.src;



// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() 
 modal.style.display = "none";

span2.onclick = function() 
 modal.style.display = "none";

</script>


Thanks in advance.






javascript css lightbox







share|improve this question



















  • 3





    You have duplicate id's (id="myImg"). All id's on a page must be unique; this is a strict rule.

    – MarsAndBack
    Mar 8 at 22:52












  • I don't see any jQuery... Only JS. Why tagging jQuery?

    – Louys Patrice Bessette
    Mar 8 at 22:55












  • @MarsAndBack could I update my code in a way to work of a class instead of an ID? and if so, how could i do this? thanks

    – Mike Dawson
    Mar 8 at 22:58











  • @LouysPatriceBessette sorry my mistake, i'm still learning and a bit unsure of the difference between Jquery/Javascript. Question amended. thANKS

    – Mike Dawson
    Mar 8 at 22:59











  • @MikeDawson javascript is the language, jQuery is a library written in javascript to make some tasks easier.

    – Philippe
    Mar 8 at 23:18


















6















I am trying to open each of my photos in a Javascript/CSS lightbox upon each of the photos being clicked.



At the moment, only the first photo in my list of photos is opening up in the lightbox. The other photos do not open in the lightbox.



Please can someone explain/show me why this is and explain/show me the correct way of doing this?



Here is my HTML/PHP:



<?php $result4 = $mysqli->query("SELECT * FROM user_data WHERE user_id = $p_id");
 if($result4->num_rows > 0) 
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';

 ?> 

<!-- The Modal -->
<div id="myModal" class="modal">
 <span class="close">&times;</span>
 <img class="modal-content" id="img01">
</div>


CSS:



<style>

#myImg 
 cursor: pointer;
 transition: 0.3s;


#myImg:hover 
 transform: scale(1.09);
 border: 1px solid #a5a5a5;



/* The Modal (background) */
.modal 
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 10; /* 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: 100%;
 max-width: 500px;
 border: 1px solid #f1f1f1;
 border-radius: 0px;



/* Caption of Modal Image */

/* Add Animation */
.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 
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;


.close:hover,
.close:focus 
 color: #bbb;
 text-decoration: none;
 cursor: pointer;


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px)
 .modal-content 
 width: 100%;
 

</style>


Javascript:



 <script>
// Get the modal
var modal = document.getElementById('myModal');

// 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("img01");
img.onclick = function()
 modal.style.display = "block";
 modalImg.src = this.src;



// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() 
 modal.style.display = "none";

span2.onclick = function() 
 modal.style.display = "none";

</script>


Thanks in advance.






javascript css lightbox







share|improve this question



















  • 3





    You have duplicate id's (id="myImg"). All id's on a page must be unique; this is a strict rule.

    – MarsAndBack
    Mar 8 at 22:52












  • I don't see any jQuery... Only JS. Why tagging jQuery?

    – Louys Patrice Bessette
    Mar 8 at 22:55












  • @MarsAndBack could I update my code in a way to work of a class instead of an ID? and if so, how could i do this? thanks

    – Mike Dawson
    Mar 8 at 22:58











  • @LouysPatriceBessette sorry my mistake, i'm still learning and a bit unsure of the difference between Jquery/Javascript. Question amended. thANKS

    – Mike Dawson
    Mar 8 at 22:59











  • @MikeDawson javascript is the language, jQuery is a library written in javascript to make some tasks easier.

    – Philippe
    Mar 8 at 23:18














6












6








6








I am trying to open each of my photos in a Javascript/CSS lightbox upon each of the photos being clicked.



At the moment, only the first photo in my list of photos is opening up in the lightbox. The other photos do not open in the lightbox.



Please can someone explain/show me why this is and explain/show me the correct way of doing this?



Here is my HTML/PHP:



<?php $result4 = $mysqli->query("SELECT * FROM user_data WHERE user_id = $p_id");
 if($result4->num_rows > 0) 
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';

 ?> 

<!-- The Modal -->
<div id="myModal" class="modal">
 <span class="close">&times;</span>
 <img class="modal-content" id="img01">
</div>


CSS:



<style>

#myImg 
 cursor: pointer;
 transition: 0.3s;


#myImg:hover 
 transform: scale(1.09);
 border: 1px solid #a5a5a5;



/* The Modal (background) */
.modal 
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 10; /* 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: 100%;
 max-width: 500px;
 border: 1px solid #f1f1f1;
 border-radius: 0px;



/* Caption of Modal Image */

/* Add Animation */
.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 
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;


.close:hover,
.close:focus 
 color: #bbb;
 text-decoration: none;
 cursor: pointer;


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px)
 .modal-content 
 width: 100%;
 

</style>


Javascript:



 <script>
// Get the modal
var modal = document.getElementById('myModal');

// 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("img01");
img.onclick = function()
 modal.style.display = "block";
 modalImg.src = this.src;



// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() 
 modal.style.display = "none";

span2.onclick = function() 
 modal.style.display = "none";

</script>


Thanks in advance.






javascript css lightbox







share|improve this question
















I am trying to open each of my photos in a Javascript/CSS lightbox upon each of the photos being clicked.



At the moment, only the first photo in my list of photos is opening up in the lightbox. The other photos do not open in the lightbox.



Please can someone explain/show me why this is and explain/show me the correct way of doing this?



Here is my HTML/PHP:



<?php $result4 = $mysqli->query("SELECT * FROM user_data WHERE user_id = $p_id");
 if($result4->num_rows > 0) 
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
 echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';

 ?> 

<!-- The Modal -->
<div id="myModal" class="modal">
 <span class="close">&times;</span>
 <img class="modal-content" id="img01">
</div>


CSS:



<style>

#myImg 
 cursor: pointer;
 transition: 0.3s;


#myImg:hover 
 transform: scale(1.09);
 border: 1px solid #a5a5a5;



/* The Modal (background) */
.modal 
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 10; /* 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: 100%;
 max-width: 500px;
 border: 1px solid #f1f1f1;
 border-radius: 0px;



/* Caption of Modal Image */

/* Add Animation */
.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 
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;


.close:hover,
.close:focus 
 color: #bbb;
 text-decoration: none;
 cursor: pointer;


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px)
 .modal-content 
 width: 100%;
 

</style>


Javascript:



 <script>
// Get the modal
var modal = document.getElementById('myModal');

// 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("img01");
img.onclick = function()
 modal.style.display = "block";
 modalImg.src = this.src;



// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() 
 modal.style.display = "none";

span2.onclick = function() 
 modal.style.display = "none";

</script>


Thanks in advance.






javascript css lightbox




javascript css lightbox






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 8 at 23:09







Mike Dawson

















asked Mar 8 at 22:50









Mike DawsonMike Dawson

312




312







  • 3





    You have duplicate id's (id="myImg"). All id's on a page must be unique; this is a strict rule.

    – MarsAndBack
    Mar 8 at 22:52












  • I don't see any jQuery... Only JS. Why tagging jQuery?

    – Louys Patrice Bessette
    Mar 8 at 22:55












  • @MarsAndBack could I update my code in a way to work of a class instead of an ID? and if so, how could i do this? thanks

    – Mike Dawson
    Mar 8 at 22:58











  • @LouysPatriceBessette sorry my mistake, i'm still learning and a bit unsure of the difference between Jquery/Javascript. Question amended. thANKS

    – Mike Dawson
    Mar 8 at 22:59











  • @MikeDawson javascript is the language, jQuery is a library written in javascript to make some tasks easier.

    – Philippe
    Mar 8 at 23:18













  • 3





    You have duplicate id's (id="myImg"). All id's on a page must be unique; this is a strict rule.

    – MarsAndBack
    Mar 8 at 22:52












  • I don't see any jQuery... Only JS. Why tagging jQuery?

    – Louys Patrice Bessette
    Mar 8 at 22:55












  • @MarsAndBack could I update my code in a way to work of a class instead of an ID? and if so, how could i do this? thanks

    – Mike Dawson
    Mar 8 at 22:58











  • @LouysPatriceBessette sorry my mistake, i'm still learning and a bit unsure of the difference between Jquery/Javascript. Question amended. thANKS

    – Mike Dawson
    Mar 8 at 22:59











  • @MikeDawson javascript is the language, jQuery is a library written in javascript to make some tasks easier.

    – Philippe
    Mar 8 at 23:18








3




3





You have duplicate id's (id="myImg"). All id's on a page must be unique; this is a strict rule.

– MarsAndBack
Mar 8 at 22:52






You have duplicate id's (id="myImg"). All id's on a page must be unique; this is a strict rule.

– MarsAndBack
Mar 8 at 22:52














I don't see any jQuery... Only JS. Why tagging jQuery?

– Louys Patrice Bessette
Mar 8 at 22:55






I don't see any jQuery... Only JS. Why tagging jQuery?

– Louys Patrice Bessette
Mar 8 at 22:55














@MarsAndBack could I update my code in a way to work of a class instead of an ID? and if so, how could i do this? thanks

– Mike Dawson
Mar 8 at 22:58





@MarsAndBack could I update my code in a way to work of a class instead of an ID? and if so, how could i do this? thanks

– Mike Dawson
Mar 8 at 22:58













@LouysPatriceBessette sorry my mistake, i'm still learning and a bit unsure of the difference between Jquery/Javascript. Question amended. thANKS

– Mike Dawson
Mar 8 at 22:59





@LouysPatriceBessette sorry my mistake, i'm still learning and a bit unsure of the difference between Jquery/Javascript. Question amended. thANKS

– Mike Dawson
Mar 8 at 22:59













@MikeDawson javascript is the language, jQuery is a library written in javascript to make some tasks easier.

– Philippe
Mar 8 at 23:18






@MikeDawson javascript is the language, jQuery is a library written in javascript to make some tasks easier.

– Philippe
Mar 8 at 23:18













2 Answers
2






active

oldest

votes


















0














Your code contains multiple id, instead try to use class and get your image class by document.getElementsByClassName then bind the click event on each image inside loop, try to add your php code to this revised code below






// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var imgs = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img01");

for(var i = 0; i < imgs.length; i++)

 imgs[i].onclick = function()
 modal.style.display = "block";
 modalImg.src = this.src;

 


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() 
 modal.style.display = "none";

span2.onclick = function() 
 modal.style.display = "none";

#myImg 
 cursor: pointer;
 transition: 0.3s;


#myImg:hover 
 transform: scale(1.09);
 border: 1px solid #a5a5a5;



/* The Modal (background) */
.modal 
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 10; /* 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: 100%;
 max-width: 500px;
 border: 1px solid #f1f1f1;
 border-radius: 0px;



/* Caption of Modal Image */

/* Add Animation */
.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 
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;


.close:hover,
.close:focus 
 color: #bbb;
 text-decoration: none;
 cursor: pointer;


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px)
 .modal-content 
 width: 100%;
 

 <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
 <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
 <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
 <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
 <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
 <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>



<!-- The Modal -->
<div id="myModal" class="modal">
 <span class="close">&times;</span>
 <img class="modal-content" id="img01">
</div>








share|improve this answer
































    0














    The good news is that you need neither an ids nor class on your images.



    • Listen for a click on the container around the images, not the images themselves. This technique is called event delegation and is better for performance. Rather than binding n event listeners for every image you may have, we add only one listener on the container of the images

    • When clicked, get the src and alt of the target element and pass it to the showModal function. Fill the modal image's src and alt with the passed values

    Advice for later



    It seems you were/are planning on showing a caption in your modal which is based on the passed-in alt value. Consider using figcaption in the modal.




    The HTML or Figure Caption element represents a caption
    or legend describing the rest of the contents of its parent
    element.




    Here's an example to get you started. I'll leave the styling of the modal/modal content to you. I used a figure element inside the modal for semantic value.



    Demo






    var modal = document.getElementById('myModal');

    var imgContainer = document.querySelector('.imageContainer');
    var modalContentImage = modal.querySelector('.modal-content-image');

    imgContainer.addEventListener('click', function(e) 
     if (e.target.nodeName === "IMG") 
     showModal(src: e.target.src, alt: e.target.alt)
     
    );

    function showModal(opts) 
     modal.style.display = "block";
     modalContentImage.setAttribute('src', opts.src);
     modalContentImage.setAttribute('alt', opts.alt);


    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    var span2 = document.getElementsByClassName("modal")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() 
     modal.style.display = "none";

    span2.onclick = function() 
     modal.style.display = "none";

    #myImg 
     cursor: pointer;
     transition: 0.3s;


    #myImg:hover 
     transform: scale(1.09);
     border: 1px solid #a5a5a5;


    /* The Modal (background) */

    .modal 
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 10;
     /* 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-image 
     margin: auto;
     display: block;
     width: 100%;
     max-width: 500px;
     border: 1px solid #f1f1f1;
     border-radius: 0px;


    /* Caption of Modal Image */

    /* Add Animation */

    .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 
     position: absolute;
     top: 15px;
     right: 35px;
     color: #f1f1f1;
     font-size: 40px;
     font-weight: bold;
     transition: 0.3s;


    .close:hover,
    .close:focus 
     color: #bbb;
     text-decoration: none;
     cursor: pointer;


    /* 100% Image Width on Smaller Screens */

    @media only screen and (max-width: 700px) 
     .modal-content 
     width: 100%;
     


    /* Presentation only */

    .imageContainer 
     min-height: 100vh;
     display: flex;
     align-items: flex-end;
     overflow-x: auto;


    .imageContainer img 
     width: 100px;
     flex-shrink: 0;


    html,
    body 
     margin: 0;
     padding: 0;

    <div id="myModal" class="modal">
     <span class="close">&times;</span>
     <figure class="modal-content">
     <img class="modal-content-image" alt>
     </figure>
    </div>

    <div class="imageContainer">
     <img src="https://picsum.photos/300/300/?image=0" alt="CPU 1">
     <img src="https://picsum.photos/300/300/?image=1" alt="CPU 2">
     <img src="https://picsum.photos/300/300/?image=2" alt="CPU 3">
     <img src="https://picsum.photos/300/300/?image=3" alt="CPU 4">
     <img src="https://picsum.photos/300/300/?image=4" alt="CPU 5">
     <img src="https://picsum.photos/300/300/?image=5" alt="CPU 6">
     <img src="https://picsum.photos/300/300/?image=6" alt="CPU 7">
     <img src="https://picsum.photos/300/300/?image=7" alt="CPU 8">
     <img src="https://picsum.photos/300/300/?image=8" alt="CPU 9">
     <img src="https://picsum.photos/300/300/?image=9" alt="CPU 10">
     <img src="https://picsum.photos/300/300/?image=10" alt="CPU 11">
     <img src="https://picsum.photos/300/300/?image=11" alt="CPU 12"> 
    </div>





    jsFiddle






    share|improve this answer

























      Your Answer






      StackExchange.ifUsing("editor", function ()
      StackExchange.using("externalEditor", function ()
      StackExchange.using("snippets", function ()
      StackExchange.snippets.init();
      );
      );
      , "code-snippets");

      StackExchange.ready(function()
      var channelOptions =
      tags: "".split(" "),
      id: "1"
      ;
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function()
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled)
      StackExchange.using("snippets", function()
      createEditor();
      );

      else
      createEditor();

      );

      function createEditor()
      StackExchange.prepareEditor(
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader:
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      ,
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      );



      );













      draft saved

      draft discarded


















      StackExchange.ready(
      function ()
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55072092%2fjavascript-css-lightbox-only-working-for-first-element%23new-answer', 'question_page');

      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      Your code contains multiple id, instead try to use class and get your image class by document.getElementsByClassName then bind the click event on each image inside loop, try to add your php code to this revised code below






      // Get the modal
      var modal = document.getElementById('myModal');

      // Get the image and insert it inside the modal - use its "alt" text as a caption
      var imgs = document.getElementsByClassName("myImg");
      var modalImg = document.getElementById("img01");

      for(var i = 0; i < imgs.length; i++)

       imgs[i].onclick = function()
       modal.style.display = "block";
       modalImg.src = this.src;

       


      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName("close")[0];
      var span2 = document.getElementsByClassName("modal")[0];

      // When the user clicks on <span> (x), close the modal
      span.onclick = function() 
       modal.style.display = "none";

      span2.onclick = function() 
       modal.style.display = "none";

      #myImg 
       cursor: pointer;
       transition: 0.3s;


      #myImg:hover 
       transform: scale(1.09);
       border: 1px solid #a5a5a5;



      /* The Modal (background) */
      .modal 
       display: none; /* Hidden by default */
       position: fixed; /* Stay in place */
       z-index: 10; /* 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: 100%;
       max-width: 500px;
       border: 1px solid #f1f1f1;
       border-radius: 0px;



      /* Caption of Modal Image */

      /* Add Animation */
      .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 
       position: absolute;
       top: 15px;
       right: 35px;
       color: #f1f1f1;
       font-size: 40px;
       font-weight: bold;
       transition: 0.3s;


      .close:hover,
      .close:focus 
       color: #bbb;
       text-decoration: none;
       cursor: pointer;


      /* 100% Image Width on Smaller Screens */
      @media only screen and (max-width: 700px)
       .modal-content 
       width: 100%;
       

       <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
       <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
       <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
       <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
       <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
       <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>



      <!-- The Modal -->
      <div id="myModal" class="modal">
       <span class="close">&times;</span>
       <img class="modal-content" id="img01">
      </div>








      share|improve this answer





























        0














        Your code contains multiple id, instead try to use class and get your image class by document.getElementsByClassName then bind the click event on each image inside loop, try to add your php code to this revised code below






        // Get the modal
        var modal = document.getElementById('myModal');

        // Get the image and insert it inside the modal - use its "alt" text as a caption
        var imgs = document.getElementsByClassName("myImg");
        var modalImg = document.getElementById("img01");

        for(var i = 0; i < imgs.length; i++)

         imgs[i].onclick = function()
         modal.style.display = "block";
         modalImg.src = this.src;

         


        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];
        var span2 = document.getElementsByClassName("modal")[0];

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() 
         modal.style.display = "none";

        span2.onclick = function() 
         modal.style.display = "none";

        #myImg 
         cursor: pointer;
         transition: 0.3s;


        #myImg:hover 
         transform: scale(1.09);
         border: 1px solid #a5a5a5;



        /* The Modal (background) */
        .modal 
         display: none; /* Hidden by default */
         position: fixed; /* Stay in place */
         z-index: 10; /* 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: 100%;
         max-width: 500px;
         border: 1px solid #f1f1f1;
         border-radius: 0px;



        /* Caption of Modal Image */

        /* Add Animation */
        .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 
         position: absolute;
         top: 15px;
         right: 35px;
         color: #f1f1f1;
         font-size: 40px;
         font-weight: bold;
         transition: 0.3s;


        .close:hover,
        .close:focus 
         color: #bbb;
         text-decoration: none;
         cursor: pointer;


        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px)
         .modal-content 
         width: 100%;
         

         <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
         <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
         <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
         <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
         <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
         <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>



        <!-- The Modal -->
        <div id="myModal" class="modal">
         <span class="close">&times;</span>
         <img class="modal-content" id="img01">
        </div>








        share|improve this answer



























          0












          0








          0







          Your code contains multiple id, instead try to use class and get your image class by document.getElementsByClassName then bind the click event on each image inside loop, try to add your php code to this revised code below






          // Get the modal
          var modal = document.getElementById('myModal');

          // Get the image and insert it inside the modal - use its "alt" text as a caption
          var imgs = document.getElementsByClassName("myImg");
          var modalImg = document.getElementById("img01");

          for(var i = 0; i < imgs.length; i++)

           imgs[i].onclick = function()
           modal.style.display = "block";
           modalImg.src = this.src;

           


          // Get the <span> element that closes the modal
          var span = document.getElementsByClassName("close")[0];
          var span2 = document.getElementsByClassName("modal")[0];

          // When the user clicks on <span> (x), close the modal
          span.onclick = function() 
           modal.style.display = "none";

          span2.onclick = function() 
           modal.style.display = "none";

          #myImg 
           cursor: pointer;
           transition: 0.3s;


          #myImg:hover 
           transform: scale(1.09);
           border: 1px solid #a5a5a5;



          /* The Modal (background) */
          .modal 
           display: none; /* Hidden by default */
           position: fixed; /* Stay in place */
           z-index: 10; /* 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: 100%;
           max-width: 500px;
           border: 1px solid #f1f1f1;
           border-radius: 0px;



          /* Caption of Modal Image */

          /* Add Animation */
          .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 
           position: absolute;
           top: 15px;
           right: 35px;
           color: #f1f1f1;
           font-size: 40px;
           font-weight: bold;
           transition: 0.3s;


          .close:hover,
          .close:focus 
           color: #bbb;
           text-decoration: none;
           cursor: pointer;


          /* 100% Image Width on Smaller Screens */
          @media only screen and (max-width: 700px)
           .modal-content 
           width: 100%;
           

           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>



          <!-- The Modal -->
          <div id="myModal" class="modal">
           <span class="close">&times;</span>
           <img class="modal-content" id="img01">
          </div>








          share|improve this answer















          Your code contains multiple id, instead try to use class and get your image class by document.getElementsByClassName then bind the click event on each image inside loop, try to add your php code to this revised code below






          // Get the modal
          var modal = document.getElementById('myModal');

          // Get the image and insert it inside the modal - use its "alt" text as a caption
          var imgs = document.getElementsByClassName("myImg");
          var modalImg = document.getElementById("img01");

          for(var i = 0; i < imgs.length; i++)

           imgs[i].onclick = function()
           modal.style.display = "block";
           modalImg.src = this.src;

           


          // Get the <span> element that closes the modal
          var span = document.getElementsByClassName("close")[0];
          var span2 = document.getElementsByClassName("modal")[0];

          // When the user clicks on <span> (x), close the modal
          span.onclick = function() 
           modal.style.display = "none";

          span2.onclick = function() 
           modal.style.display = "none";

          #myImg 
           cursor: pointer;
           transition: 0.3s;


          #myImg:hover 
           transform: scale(1.09);
           border: 1px solid #a5a5a5;



          /* The Modal (background) */
          .modal 
           display: none; /* Hidden by default */
           position: fixed; /* Stay in place */
           z-index: 10; /* 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: 100%;
           max-width: 500px;
           border: 1px solid #f1f1f1;
           border-radius: 0px;



          /* Caption of Modal Image */

          /* Add Animation */
          .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 
           position: absolute;
           top: 15px;
           right: 35px;
           color: #f1f1f1;
           font-size: 40px;
           font-weight: bold;
           transition: 0.3s;


          .close:hover,
          .close:focus 
           color: #bbb;
           text-decoration: none;
           cursor: pointer;


          /* 100% Image Width on Smaller Screens */
          @media only screen and (max-width: 700px)
           .modal-content 
           width: 100%;
           

           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>



          <!-- The Modal -->
          <div id="myModal" class="modal">
           <span class="close">&times;</span>
           <img class="modal-content" id="img01">
          </div>








          // Get the modal
          var modal = document.getElementById('myModal');

          // Get the image and insert it inside the modal - use its "alt" text as a caption
          var imgs = document.getElementsByClassName("myImg");
          var modalImg = document.getElementById("img01");

          for(var i = 0; i < imgs.length; i++)

           imgs[i].onclick = function()
           modal.style.display = "block";
           modalImg.src = this.src;

           


          // Get the <span> element that closes the modal
          var span = document.getElementsByClassName("close")[0];
          var span2 = document.getElementsByClassName("modal")[0];

          // When the user clicks on <span> (x), close the modal
          span.onclick = function() 
           modal.style.display = "none";

          span2.onclick = function() 
           modal.style.display = "none";

          #myImg 
           cursor: pointer;
           transition: 0.3s;


          #myImg:hover 
           transform: scale(1.09);
           border: 1px solid #a5a5a5;



          /* The Modal (background) */
          .modal 
           display: none; /* Hidden by default */
           position: fixed; /* Stay in place */
           z-index: 10; /* 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: 100%;
           max-width: 500px;
           border: 1px solid #f1f1f1;
           border-radius: 0px;



          /* Caption of Modal Image */

          /* Add Animation */
          .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 
           position: absolute;
           top: 15px;
           right: 35px;
           color: #f1f1f1;
           font-size: 40px;
           font-weight: bold;
           transition: 0.3s;


          .close:hover,
          .close:focus 
           color: #bbb;
           text-decoration: none;
           cursor: pointer;


          /* 100% Image Width on Smaller Screens */
          @media only screen and (max-width: 700px)
           .modal-content 
           width: 100%;
           

           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>



          <!-- The Modal -->
          <div id="myModal" class="modal">
           <span class="close">&times;</span>
           <img class="modal-content" id="img01">
          </div>





          // Get the modal
          var modal = document.getElementById('myModal');

          // Get the image and insert it inside the modal - use its "alt" text as a caption
          var imgs = document.getElementsByClassName("myImg");
          var modalImg = document.getElementById("img01");

          for(var i = 0; i < imgs.length; i++)

           imgs[i].onclick = function()
           modal.style.display = "block";
           modalImg.src = this.src;

           


          // Get the <span> element that closes the modal
          var span = document.getElementsByClassName("close")[0];
          var span2 = document.getElementsByClassName("modal")[0];

          // When the user clicks on <span> (x), close the modal
          span.onclick = function() 
           modal.style.display = "none";

          span2.onclick = function() 
           modal.style.display = "none";

          #myImg 
           cursor: pointer;
           transition: 0.3s;


          #myImg:hover 
           transform: scale(1.09);
           border: 1px solid #a5a5a5;



          /* The Modal (background) */
          .modal 
           display: none; /* Hidden by default */
           position: fixed; /* Stay in place */
           z-index: 10; /* 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: 100%;
           max-width: 500px;
           border: 1px solid #f1f1f1;
           border-radius: 0px;



          /* Caption of Modal Image */

          /* Add Animation */
          .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 
           position: absolute;
           top: 15px;
           right: 35px;
           color: #f1f1f1;
           font-size: 40px;
           font-weight: bold;
           transition: 0.3s;


          .close:hover,
          .close:focus 
           color: #bbb;
           text-decoration: none;
           cursor: pointer;


          /* 100% Image Width on Smaller Screens */
          @media only screen and (max-width: 700px)
           .modal-content 
           width: 100%;
           

           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>
           <div class="profile_gallery_image"><img class="myImg" src='https://via.placeholder.com/150' height="100%" width="100%" /></div>



          <!-- The Modal -->
          <div id="myModal" class="modal">
           <span class="close">&times;</span>
           <img class="modal-content" id="img01">
          </div>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Mar 8 at 23:39

























          answered Mar 8 at 23:34









          Amine KOUISAmine KOUIS

          1,13259




          1,13259























              0














              The good news is that you need neither an ids nor class on your images.



              • Listen for a click on the container around the images, not the images themselves. This technique is called event delegation and is better for performance. Rather than binding n event listeners for every image you may have, we add only one listener on the container of the images

              • When clicked, get the src and alt of the target element and pass it to the showModal function. Fill the modal image's src and alt with the passed values

              Advice for later



              It seems you were/are planning on showing a caption in your modal which is based on the passed-in alt value. Consider using figcaption in the modal.




              The HTML or Figure Caption element represents a caption
              or legend describing the rest of the contents of its parent
              element.




              Here's an example to get you started. I'll leave the styling of the modal/modal content to you. I used a figure element inside the modal for semantic value.



              Demo






              var modal = document.getElementById('myModal');

              var imgContainer = document.querySelector('.imageContainer');
              var modalContentImage = modal.querySelector('.modal-content-image');

              imgContainer.addEventListener('click', function(e) 
               if (e.target.nodeName === "IMG") 
               showModal(src: e.target.src, alt: e.target.alt)
               
              );

              function showModal(opts) 
               modal.style.display = "block";
               modalContentImage.setAttribute('src', opts.src);
               modalContentImage.setAttribute('alt', opts.alt);


              // Get the <span> element that closes the modal
              var span = document.getElementsByClassName("close")[0];
              var span2 = document.getElementsByClassName("modal")[0];

              // When the user clicks on <span> (x), close the modal
              span.onclick = function() 
               modal.style.display = "none";

              span2.onclick = function() 
               modal.style.display = "none";

              #myImg 
               cursor: pointer;
               transition: 0.3s;


              #myImg:hover 
               transform: scale(1.09);
               border: 1px solid #a5a5a5;


              /* The Modal (background) */

              .modal 
               display: none;
               /* Hidden by default */
               position: fixed;
               /* Stay in place */
               z-index: 10;
               /* 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-image 
               margin: auto;
               display: block;
               width: 100%;
               max-width: 500px;
               border: 1px solid #f1f1f1;
               border-radius: 0px;


              /* Caption of Modal Image */

              /* Add Animation */

              .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 
               position: absolute;
               top: 15px;
               right: 35px;
               color: #f1f1f1;
               font-size: 40px;
               font-weight: bold;
               transition: 0.3s;


              .close:hover,
              .close:focus 
               color: #bbb;
               text-decoration: none;
               cursor: pointer;


              /* 100% Image Width on Smaller Screens */

              @media only screen and (max-width: 700px) 
               .modal-content 
               width: 100%;
               


              /* Presentation only */

              .imageContainer 
               min-height: 100vh;
               display: flex;
               align-items: flex-end;
               overflow-x: auto;


              .imageContainer img 
               width: 100px;
               flex-shrink: 0;


              html,
              body 
               margin: 0;
               padding: 0;

              <div id="myModal" class="modal">
               <span class="close">&times;</span>
               <figure class="modal-content">
               <img class="modal-content-image" alt>
               </figure>
              </div>

              <div class="imageContainer">
               <img src="https://picsum.photos/300/300/?image=0" alt="CPU 1">
               <img src="https://picsum.photos/300/300/?image=1" alt="CPU 2">
               <img src="https://picsum.photos/300/300/?image=2" alt="CPU 3">
               <img src="https://picsum.photos/300/300/?image=3" alt="CPU 4">
               <img src="https://picsum.photos/300/300/?image=4" alt="CPU 5">
               <img src="https://picsum.photos/300/300/?image=5" alt="CPU 6">
               <img src="https://picsum.photos/300/300/?image=6" alt="CPU 7">
               <img src="https://picsum.photos/300/300/?image=7" alt="CPU 8">
               <img src="https://picsum.photos/300/300/?image=8" alt="CPU 9">
               <img src="https://picsum.photos/300/300/?image=9" alt="CPU 10">
               <img src="https://picsum.photos/300/300/?image=10" alt="CPU 11">
               <img src="https://picsum.photos/300/300/?image=11" alt="CPU 12"> 
              </div>





              jsFiddle






              share|improve this answer





























                0














                The good news is that you need neither an ids nor class on your images.



                • Listen for a click on the container around the images, not the images themselves. This technique is called event delegation and is better for performance. Rather than binding n event listeners for every image you may have, we add only one listener on the container of the images

                • When clicked, get the src and alt of the target element and pass it to the showModal function. Fill the modal image's src and alt with the passed values

                Advice for later



                It seems you were/are planning on showing a caption in your modal which is based on the passed-in alt value. Consider using figcaption in the modal.




                The HTML or Figure Caption element represents a caption
                or legend describing the rest of the contents of its parent
                element.




                Here's an example to get you started. I'll leave the styling of the modal/modal content to you. I used a figure element inside the modal for semantic value.



                Demo






                var modal = document.getElementById('myModal');

                var imgContainer = document.querySelector('.imageContainer');
                var modalContentImage = modal.querySelector('.modal-content-image');

                imgContainer.addEventListener('click', function(e) 
                 if (e.target.nodeName === "IMG") 
                 showModal(src: e.target.src, alt: e.target.alt)
                 
                );

                function showModal(opts) 
                 modal.style.display = "block";
                 modalContentImage.setAttribute('src', opts.src);
                 modalContentImage.setAttribute('alt', opts.alt);


                // Get the <span> element that closes the modal
                var span = document.getElementsByClassName("close")[0];
                var span2 = document.getElementsByClassName("modal")[0];

                // When the user clicks on <span> (x), close the modal
                span.onclick = function() 
                 modal.style.display = "none";

                span2.onclick = function() 
                 modal.style.display = "none";

                #myImg 
                 cursor: pointer;
                 transition: 0.3s;


                #myImg:hover 
                 transform: scale(1.09);
                 border: 1px solid #a5a5a5;


                /* The Modal (background) */

                .modal 
                 display: none;
                 /* Hidden by default */
                 position: fixed;
                 /* Stay in place */
                 z-index: 10;
                 /* 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-image 
                 margin: auto;
                 display: block;
                 width: 100%;
                 max-width: 500px;
                 border: 1px solid #f1f1f1;
                 border-radius: 0px;


                /* Caption of Modal Image */

                /* Add Animation */

                .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 
                 position: absolute;
                 top: 15px;
                 right: 35px;
                 color: #f1f1f1;
                 font-size: 40px;
                 font-weight: bold;
                 transition: 0.3s;


                .close:hover,
                .close:focus 
                 color: #bbb;
                 text-decoration: none;
                 cursor: pointer;


                /* 100% Image Width on Smaller Screens */

                @media only screen and (max-width: 700px) 
                 .modal-content 
                 width: 100%;
                 


                /* Presentation only */

                .imageContainer 
                 min-height: 100vh;
                 display: flex;
                 align-items: flex-end;
                 overflow-x: auto;


                .imageContainer img 
                 width: 100px;
                 flex-shrink: 0;


                html,
                body 
                 margin: 0;
                 padding: 0;

                <div id="myModal" class="modal">
                 <span class="close">&times;</span>
                 <figure class="modal-content">
                 <img class="modal-content-image" alt>
                 </figure>
                </div>

                <div class="imageContainer">
                 <img src="https://picsum.photos/300/300/?image=0" alt="CPU 1">
                 <img src="https://picsum.photos/300/300/?image=1" alt="CPU 2">
                 <img src="https://picsum.photos/300/300/?image=2" alt="CPU 3">
                 <img src="https://picsum.photos/300/300/?image=3" alt="CPU 4">
                 <img src="https://picsum.photos/300/300/?image=4" alt="CPU 5">
                 <img src="https://picsum.photos/300/300/?image=5" alt="CPU 6">
                 <img src="https://picsum.photos/300/300/?image=6" alt="CPU 7">
                 <img src="https://picsum.photos/300/300/?image=7" alt="CPU 8">
                 <img src="https://picsum.photos/300/300/?image=8" alt="CPU 9">
                 <img src="https://picsum.photos/300/300/?image=9" alt="CPU 10">
                 <img src="https://picsum.photos/300/300/?image=10" alt="CPU 11">
                 <img src="https://picsum.photos/300/300/?image=11" alt="CPU 12"> 
                </div>





                jsFiddle






                share|improve this answer



























                  0












                  0








                  0







                  The good news is that you need neither an ids nor class on your images.



                  • Listen for a click on the container around the images, not the images themselves. This technique is called event delegation and is better for performance. Rather than binding n event listeners for every image you may have, we add only one listener on the container of the images

                  • When clicked, get the src and alt of the target element and pass it to the showModal function. Fill the modal image's src and alt with the passed values

                  Advice for later



                  It seems you were/are planning on showing a caption in your modal which is based on the passed-in alt value. Consider using figcaption in the modal.




                  The HTML or Figure Caption element represents a caption
                  or legend describing the rest of the contents of its parent
                  element.




                  Here's an example to get you started. I'll leave the styling of the modal/modal content to you. I used a figure element inside the modal for semantic value.



                  Demo






                  var modal = document.getElementById('myModal');

                  var imgContainer = document.querySelector('.imageContainer');
                  var modalContentImage = modal.querySelector('.modal-content-image');

                  imgContainer.addEventListener('click', function(e) 
                   if (e.target.nodeName === "IMG") 
                   showModal(src: e.target.src, alt: e.target.alt)
                   
                  );

                  function showModal(opts) 
                   modal.style.display = "block";
                   modalContentImage.setAttribute('src', opts.src);
                   modalContentImage.setAttribute('alt', opts.alt);


                  // Get the <span> element that closes the modal
                  var span = document.getElementsByClassName("close")[0];
                  var span2 = document.getElementsByClassName("modal")[0];

                  // When the user clicks on <span> (x), close the modal
                  span.onclick = function() 
                   modal.style.display = "none";

                  span2.onclick = function() 
                   modal.style.display = "none";

                  #myImg 
                   cursor: pointer;
                   transition: 0.3s;


                  #myImg:hover 
                   transform: scale(1.09);
                   border: 1px solid #a5a5a5;


                  /* The Modal (background) */

                  .modal 
                   display: none;
                   /* Hidden by default */
                   position: fixed;
                   /* Stay in place */
                   z-index: 10;
                   /* 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-image 
                   margin: auto;
                   display: block;
                   width: 100%;
                   max-width: 500px;
                   border: 1px solid #f1f1f1;
                   border-radius: 0px;


                  /* Caption of Modal Image */

                  /* Add Animation */

                  .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 
                   position: absolute;
                   top: 15px;
                   right: 35px;
                   color: #f1f1f1;
                   font-size: 40px;
                   font-weight: bold;
                   transition: 0.3s;


                  .close:hover,
                  .close:focus 
                   color: #bbb;
                   text-decoration: none;
                   cursor: pointer;


                  /* 100% Image Width on Smaller Screens */

                  @media only screen and (max-width: 700px) 
                   .modal-content 
                   width: 100%;
                   


                  /* Presentation only */

                  .imageContainer 
                   min-height: 100vh;
                   display: flex;
                   align-items: flex-end;
                   overflow-x: auto;


                  .imageContainer img 
                   width: 100px;
                   flex-shrink: 0;


                  html,
                  body 
                   margin: 0;
                   padding: 0;

                  <div id="myModal" class="modal">
                   <span class="close">&times;</span>
                   <figure class="modal-content">
                   <img class="modal-content-image" alt>
                   </figure>
                  </div>

                  <div class="imageContainer">
                   <img src="https://picsum.photos/300/300/?image=0" alt="CPU 1">
                   <img src="https://picsum.photos/300/300/?image=1" alt="CPU 2">
                   <img src="https://picsum.photos/300/300/?image=2" alt="CPU 3">
                   <img src="https://picsum.photos/300/300/?image=3" alt="CPU 4">
                   <img src="https://picsum.photos/300/300/?image=4" alt="CPU 5">
                   <img src="https://picsum.photos/300/300/?image=5" alt="CPU 6">
                   <img src="https://picsum.photos/300/300/?image=6" alt="CPU 7">
                   <img src="https://picsum.photos/300/300/?image=7" alt="CPU 8">
                   <img src="https://picsum.photos/300/300/?image=8" alt="CPU 9">
                   <img src="https://picsum.photos/300/300/?image=9" alt="CPU 10">
                   <img src="https://picsum.photos/300/300/?image=10" alt="CPU 11">
                   <img src="https://picsum.photos/300/300/?image=11" alt="CPU 12"> 
                  </div>





                  jsFiddle






                  share|improve this answer















                  The good news is that you need neither an ids nor class on your images.



                  • Listen for a click on the container around the images, not the images themselves. This technique is called event delegation and is better for performance. Rather than binding n event listeners for every image you may have, we add only one listener on the container of the images

                  • When clicked, get the src and alt of the target element and pass it to the showModal function. Fill the modal image's src and alt with the passed values

                  Advice for later



                  It seems you were/are planning on showing a caption in your modal which is based on the passed-in alt value. Consider using figcaption in the modal.




                  The HTML or Figure Caption element represents a caption
                  or legend describing the rest of the contents of its parent
                  element.




                  Here's an example to get you started. I'll leave the styling of the modal/modal content to you. I used a figure element inside the modal for semantic value.



                  Demo






                  var modal = document.getElementById('myModal');

                  var imgContainer = document.querySelector('.imageContainer');
                  var modalContentImage = modal.querySelector('.modal-content-image');

                  imgContainer.addEventListener('click', function(e) 
                   if (e.target.nodeName === "IMG") 
                   showModal(src: e.target.src, alt: e.target.alt)
                   
                  );

                  function showModal(opts) 
                   modal.style.display = "block";
                   modalContentImage.setAttribute('src', opts.src);
                   modalContentImage.setAttribute('alt', opts.alt);


                  // Get the <span> element that closes the modal
                  var span = document.getElementsByClassName("close")[0];
                  var span2 = document.getElementsByClassName("modal")[0];

                  // When the user clicks on <span> (x), close the modal
                  span.onclick = function() 
                   modal.style.display = "none";

                  span2.onclick = function() 
                   modal.style.display = "none";

                  #myImg 
                   cursor: pointer;
                   transition: 0.3s;


                  #myImg:hover 
                   transform: scale(1.09);
                   border: 1px solid #a5a5a5;


                  /* The Modal (background) */

                  .modal 
                   display: none;
                   /* Hidden by default */
                   position: fixed;
                   /* Stay in place */
                   z-index: 10;
                   /* 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-image 
                   margin: auto;
                   display: block;
                   width: 100%;
                   max-width: 500px;
                   border: 1px solid #f1f1f1;
                   border-radius: 0px;


                  /* Caption of Modal Image */

                  /* Add Animation */

                  .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 
                   position: absolute;
                   top: 15px;
                   right: 35px;
                   color: #f1f1f1;
                   font-size: 40px;
                   font-weight: bold;
                   transition: 0.3s;


                  .close:hover,
                  .close:focus 
                   color: #bbb;
                   text-decoration: none;
                   cursor: pointer;


                  /* 100% Image Width on Smaller Screens */

                  @media only screen and (max-width: 700px) 
                   .modal-content 
                   width: 100%;
                   


                  /* Presentation only */

                  .imageContainer 
                   min-height: 100vh;
                   display: flex;
                   align-items: flex-end;
                   overflow-x: auto;


                  .imageContainer img 
                   width: 100px;
                   flex-shrink: 0;


                  html,
                  body 
                   margin: 0;
                   padding: 0;

                  <div id="myModal" class="modal">
                   <span class="close">&times;</span>
                   <figure class="modal-content">
                   <img class="modal-content-image" alt>
                   </figure>
                  </div>

                  <div class="imageContainer">
                   <img src="https://picsum.photos/300/300/?image=0" alt="CPU 1">
                   <img src="https://picsum.photos/300/300/?image=1" alt="CPU 2">
                   <img src="https://picsum.photos/300/300/?image=2" alt="CPU 3">
                   <img src="https://picsum.photos/300/300/?image=3" alt="CPU 4">
                   <img src="https://picsum.photos/300/300/?image=4" alt="CPU 5">
                   <img src="https://picsum.photos/300/300/?image=5" alt="CPU 6">
                   <img src="https://picsum.photos/300/300/?image=6" alt="CPU 7">
                   <img src="https://picsum.photos/300/300/?image=7" alt="CPU 8">
                   <img src="https://picsum.photos/300/300/?image=8" alt="CPU 9">
                   <img src="https://picsum.photos/300/300/?image=9" alt="CPU 10">
                   <img src="https://picsum.photos/300/300/?image=10" alt="CPU 11">
                   <img src="https://picsum.photos/300/300/?image=11" alt="CPU 12"> 
                  </div>





                  jsFiddle






                  var modal = document.getElementById('myModal');

                  var imgContainer = document.querySelector('.imageContainer');
                  var modalContentImage = modal.querySelector('.modal-content-image');

                  imgContainer.addEventListener('click', function(e) 
                   if (e.target.nodeName === "IMG") 
                   showModal(src: e.target.src, alt: e.target.alt)
                   
                  );

                  function showModal(opts) 
                   modal.style.display = "block";
                   modalContentImage.setAttribute('src', opts.src);
                   modalContentImage.setAttribute('alt', opts.alt);


                  // Get the <span> element that closes the modal
                  var span = document.getElementsByClassName("close")[0];
                  var span2 = document.getElementsByClassName("modal")[0];

                  // When the user clicks on <span> (x), close the modal
                  span.onclick = function() 
                   modal.style.display = "none";

                  span2.onclick = function() 
                   modal.style.display = "none";

                  #myImg 
                   cursor: pointer;
                   transition: 0.3s;


                  #myImg:hover 
                   transform: scale(1.09);
                   border: 1px solid #a5a5a5;


                  /* The Modal (background) */

                  .modal 
                   display: none;
                   /* Hidden by default */
                   position: fixed;
                   /* Stay in place */
                   z-index: 10;
                   /* 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-image 
                   margin: auto;
                   display: block;
                   width: 100%;
                   max-width: 500px;
                   border: 1px solid #f1f1f1;
                   border-radius: 0px;


                  /* Caption of Modal Image */

                  /* Add Animation */

                  .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 
                   position: absolute;
                   top: 15px;
                   right: 35px;
                   color: #f1f1f1;
                   font-size: 40px;
                   font-weight: bold;
                   transition: 0.3s;


                  .close:hover,
                  .close:focus 
                   color: #bbb;
                   text-decoration: none;
                   cursor: pointer;


                  /* 100% Image Width on Smaller Screens */

                  @media only screen and (max-width: 700px) 
                   .modal-content 
                   width: 100%;
                   


                  /* Presentation only */

                  .imageContainer 
                   min-height: 100vh;
                   display: flex;
                   align-items: flex-end;
                   overflow-x: auto;


                  .imageContainer img 
                   width: 100px;
                   flex-shrink: 0;


                  html,
                  body 
                   margin: 0;
                   padding: 0;

                  <div id="myModal" class="modal">
                   <span class="close">&times;</span>
                   <figure class="modal-content">
                   <img class="modal-content-image" alt>
                   </figure>
                  </div>

                  <div class="imageContainer">
                   <img src="https://picsum.photos/300/300/?image=0" alt="CPU 1">
                   <img src="https://picsum.photos/300/300/?image=1" alt="CPU 2">
                   <img src="https://picsum.photos/300/300/?image=2" alt="CPU 3">
                   <img src="https://picsum.photos/300/300/?image=3" alt="CPU 4">
                   <img src="https://picsum.photos/300/300/?image=4" alt="CPU 5">
                   <img src="https://picsum.photos/300/300/?image=5" alt="CPU 6">
                   <img src="https://picsum.photos/300/300/?image=6" alt="CPU 7">
                   <img src="https://picsum.photos/300/300/?image=7" alt="CPU 8">
                   <img src="https://picsum.photos/300/300/?image=8" alt="CPU 9">
                   <img src="https://picsum.photos/300/300/?image=9" alt="CPU 10">
                   <img src="https://picsum.photos/300/300/?image=10" alt="CPU 11">
                   <img src="https://picsum.photos/300/300/?image=11" alt="CPU 12"> 
                  </div>





                  var modal = document.getElementById('myModal');

                  var imgContainer = document.querySelector('.imageContainer');
                  var modalContentImage = modal.querySelector('.modal-content-image');

                  imgContainer.addEventListener('click', function(e) 
                   if (e.target.nodeName === "IMG") 
                   showModal(src: e.target.src, alt: e.target.alt)
                   
                  );

                  function showModal(opts) 
                   modal.style.display = "block";
                   modalContentImage.setAttribute('src', opts.src);
                   modalContentImage.setAttribute('alt', opts.alt);


                  // Get the <span> element that closes the modal
                  var span = document.getElementsByClassName("close")[0];
                  var span2 = document.getElementsByClassName("modal")[0];

                  // When the user clicks on <span> (x), close the modal
                  span.onclick = function() 
                   modal.style.display = "none";

                  span2.onclick = function() 
                   modal.style.display = "none";

                  #myImg 
                   cursor: pointer;
                   transition: 0.3s;


                  #myImg:hover 
                   transform: scale(1.09);
                   border: 1px solid #a5a5a5;


                  /* The Modal (background) */

                  .modal 
                   display: none;
                   /* Hidden by default */
                   position: fixed;
                   /* Stay in place */
                   z-index: 10;
                   /* 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-image 
                   margin: auto;
                   display: block;
                   width: 100%;
                   max-width: 500px;
                   border: 1px solid #f1f1f1;
                   border-radius: 0px;


                  /* Caption of Modal Image */

                  /* Add Animation */

                  .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 
                   position: absolute;
                   top: 15px;
                   right: 35px;
                   color: #f1f1f1;
                   font-size: 40px;
                   font-weight: bold;
                   transition: 0.3s;


                  .close:hover,
                  .close:focus 
                   color: #bbb;
                   text-decoration: none;
                   cursor: pointer;


                  /* 100% Image Width on Smaller Screens */

                  @media only screen and (max-width: 700px) 
                   .modal-content 
                   width: 100%;
                   


                  /* Presentation only */

                  .imageContainer 
                   min-height: 100vh;
                   display: flex;
                   align-items: flex-end;
                   overflow-x: auto;


                  .imageContainer img 
                   width: 100px;
                   flex-shrink: 0;


                  html,
                  body 
                   margin: 0;
                   padding: 0;

                  <div id="myModal" class="modal">
                   <span class="close">&times;</span>
                   <figure class="modal-content">
                   <img class="modal-content-image" alt>
                   </figure>
                  </div>

                  <div class="imageContainer">
                   <img src="https://picsum.photos/300/300/?image=0" alt="CPU 1">
                   <img src="https://picsum.photos/300/300/?image=1" alt="CPU 2">
                   <img src="https://picsum.photos/300/300/?image=2" alt="CPU 3">
                   <img src="https://picsum.photos/300/300/?image=3" alt="CPU 4">
                   <img src="https://picsum.photos/300/300/?image=4" alt="CPU 5">
                   <img src="https://picsum.photos/300/300/?image=5" alt="CPU 6">
                   <img src="https://picsum.photos/300/300/?image=6" alt="CPU 7">
                   <img src="https://picsum.photos/300/300/?image=7" alt="CPU 8">
                   <img src="https://picsum.photos/300/300/?image=8" alt="CPU 9">
                   <img src="https://picsum.photos/300/300/?image=9" alt="CPU 10">
                   <img src="https://picsum.photos/300/300/?image=10" alt="CPU 11">
                   <img src="https://picsum.photos/300/300/?image=11" alt="CPU 12"> 
                  </div>






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Mar 9 at 0:38

























                  answered Mar 8 at 23:34









                  Andy HoffmanAndy Hoffman

                  10.5k31840




                  10.5k31840



























                      draft saved

                      draft discarded
















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid …


                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.

                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function ()
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55072092%2fjavascript-css-lightbox-only-working-for-first-element%23new-answer', 'question_page');

                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      -

                      Popular posts from this blog

                      1928 у кіно

                      Image
                      Роки в кіно   1870-ті   1880-ті 1888  • 1889 1890-ті 1890  • 1891  • 1892  • 1893  • 1894 1895  • 1896  • 1897  • 1898  • 1899 1900-ті 1900  • 1901  • 1902  • 1903  • 1904 1905  • 1906  • 1907  • 1908  • 1909 1910-ті 1910  • 1911  • 1912  • 1913  • 1914 1915  • 1916  • 1917  • 1918  • 1919 1920-ті 1920  • 1921  • 1922  • 1923  • 1924 1925  • 1926  • 1927  • 1928  • 1929 1930-ті 1930  • 1931  • 1932  • 1933  • 1934 1935  • 1936 ...
                      Read more

                      Захаров Федір Захарович

                      Image
                      Федір Захарович Захаров Федір Захаров, 1986 рік Народження 5 вересня 1919 ( 1919-09-05 ) Олександрівське [d] , Смоленська губернія , Російська СФРР Смерть 29 вересня 1997 ( 1997-09-29 ) (78 років)   Ялта , Автономн...
                      Read more

                      Ель Греко

                      Image
                      Ель Греко ісп. El Greco «Портрет старого» (Автопортрет Ель Греко), бл. 1595–1600, олія на полотні При народженні Доменікос Теотокопулос Народження 1541 ( 1541 ) Крит, Венеціанська Республіка (ни...
                      Read more