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

                      Save data to MySQL database using ExtJS and PHP [closed]2019 Community Moderator ElectionHow can I prevent SQL injection in PHP?Which MySQL data type to use for storing boolean valuesPHP: Delete an element from an arrayHow do I connect to a MySQL Database in Python?Should I use the datetime or timestamp data type in MySQL?How to get a list of MySQL user accountsHow Do You Parse and Process HTML/XML in PHP?Reference — What does this symbol mean in PHP?How does PHP 'foreach' actually work?Why shouldn't I use mysql_* functions in PHP?

                      Image
                      Does this AnyDice function accurately calculate the number of ogres you make unconcious with three 4th-level castings of Sleep? Making a sword in the stone, in a medieval world without magic Identifying the interval from A♭ to D♯ Why is Vishnu's skin colour mentioned as both white and blue in the Vishnu-sahasranaama? SQL Server Primary Login Restrictions Have researchers managed to "reverse time"? If so, what does that mean for physics? Why does Deadpool say "You're welcome, Canada," after shooting Ryan Reynolds in the end credits? Check this translation of Amores 1.3.26 Why did it take so long to abandon sail after steamships were demonstrated? Plot a function of two variables equal 0 2D counterpart of std::array in C++17 Could the Saturn V actually have launched astronauts around Venus? Why is "das Weib" grammatically neuter? How to make healing in an exploration game interesting Life insurance that covers only simulta
                      Read more

                      Compiling GNU Global with universal-ctags support 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!Tags for Emacs: Relationship between etags, ebrowse, cscope, GNU Global and exuberant ctagsVim and Ctags tips and trickscscope or ctags why choose one over the other?scons and ctagsctags cannot open option file “.ctags”Adding tag scopes in universal-ctagsShould I use Universal-ctags?Universal ctags on WindowsHow do I install GNU Global with universal ctags support using Homebrew?Universal ctags with emacsHow to highlight ctags generated by Universal Ctags in Vim?

                      Image
                      How to ask rejected full-time candidates to apply to teach individual courses? Why these surprising proportionalities of integrals involving odd zeta values? A German immigrant ancestor has a "Registration Affidavit of Alien Enemy" on file. What does that mean exactly? Why did Israel vote against lifting the American embargo on Cuba? Unix AIX passing variable and arguments to expect and spawn Kepler's 3rd law: ratios don't fit data Why does my GNOME settings mention "Moto C Plus"? Continue tikz picture on next page What documents does someone with a long-term visa need to travel to another Schengen country? “Since the train was delayed for more than an hour, passengers were given a full refund.” – Why is there no article before “passengers”? How to create a command for the "strange m" symbol in latex? How to get a single big right brace? Is the Mordenkainen's Sword spell underpowered? Why did Bronn offer to be Tyrion L
                      Read more

                      Add ONERROR event to image from jsp tldHow to add an image to a JPanel?Saving image from PHP URLHTML img scalingCheck if an image is loaded (no errors) with jQueryHow to force an <img> to take up width, even if the image is not loadedHow do I populate hidden form field with a value set in Spring ControllerStyling Raw elements Generated from JSP tagds with Jquery MobileLimit resizing of images with explicitly set width and height attributeserror TLD use in a jsp fileJsp tld files cannot be resolved

                      Image
                      At which point does a character regain all their Hit Dice? Why are on-board computers allowed to change controls without notifying the pilots? How do I keep an essay about "feeling flat" from feeling flat? Time travel short story where a man arrives in the late 19th century in a time machine and then sends the machine back into the past How to be diplomatic in refusing to write code that breaches the privacy of our users Understanding "audieritis" in Psalm 94 Greatest common substring Go Pregnant or Go Home Why did Kant, Hegel, and Adorno leave some words and phrases in the Greek alphabet? What to do with wrong results in talks? Failed to fetch jessie backports repository Increase performance creating Mandelbrot set in python How can I replace every global instance of "x[2]" with "x_2" What are the ramifications of creating a homebrew world without an Astral Plane? Are there any comparative studies done between Ashtava
                      Read more