0

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

var img = document.getElementsByClassName("img");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
  modal.style.display = "none";
}
.row{
 display: flex;
 flex-wrap: wrap;
 padding: 0 4px;
 justify-content: center;
}

.column{
 flex: 1 0 22%;
 max-width: 25%;
 padding: 0 4px;
}

.column img{
 margin-top: 8px;
 vertical-align: middle;
 width: 100%;
 box-shadow: 3px 3px 2px grey;
 border-radius: 8px;
}


.img {
    cursor: pointer;
    transition: 0.3s;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* 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: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@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%;
  }
}
<!DOCTYPE html>
<html>
 <head>
  <title>Example</title>
 </head>
 <body>
  <div class="conta">
   <div class="row">
    <div class="column">
     <img class="img" alt="example" src="example.jpg">
     <img class="img" alt="example" src="example/example.jpg">
    </div>
    <div class="column">
     <img class="img" alt="example." src="example/example.jpg">
     <img class="img" alt="example"src="example/example.jpg">
     <img class="img" alt="example" src="example/example.jpg">
    </div>
    <div class="column">
     <img class="img" alt="example" src="example/example.jpg">
     <img class="img" alt="example" src="example/example.jpg">
     <img class="img" alt="example" src="example/example.jpg">
    </div>
    <div class="column">
     <img class="img" alt="example" src="example/example.jpg">
     <img class="img" alt="example" src="example/example.jpg">
     <img class="img" alt="example" src="example/example.jpg">
    </div>
   </div> 
  </div>
  <div id="myModal" class="modal">
   <span class="close">&times;</span>
   <img class="modal-content" id="img01">
   <div id="caption"></div>
  </div>
  <script src="lightBox.js"></script>
 </body>
</html>

I am trying to make a modal image gallery. I tried to make all the images with the class img. But nothing happens and I can't click the images. I get an error in my inspector. It is ' Cannot set property 'onclick' of undefined'. On the line span.onclick = function() { I tried the two link methods below. Neither worked for me.

Modal image galleries - multiple images
https://www.w3schools.com/howto/howto_css_modal_images.asp

Is this only possible with query? I don't really want to use it.

Stratocasder
  • 107
  • 1
  • 1
  • 8
  • First `getElementsByClassName` returns an `HTMLCollection`, an array like structure, so using it like `img.onclick` isn't correct. Something like `img[0].onclick` is what you would want. As for the erroring line it means that `getElementsByClassName("close")` didnt find any elements (ie the `HTMLCollection` returned was empty). – Patrick Evans Jan 11 '20 at 04:49
  • @Patrick Evans I am kind of new to web coding. How would I use `img[0].onclick`? I tried to just replace it in my code and that just moved the error to that line. – Stratocasder Jan 11 '20 at 04:55
  • Then that means both calls are not finding your elements. This means your code is probably running before the elements are created. If you are creating them dynamically you need to run this code after you insert them into the page. If they are static elements (hard coded) then you need to place your script after the elements in the html code, ie place your ` – Patrick Evans Jan 11 '20 at 05:16
  • replace `var img = document.getElementsByClassName("img");` to `var img = document.getElementsByClassName("img")[0];`. But keep in mind with this, if you have multiple element, as it will only apply for the first image. – CHANist Jan 11 '20 at 05:24
  • @PatrickEvans thank you the error went away, but it does not display the modal still. – Stratocasder Jan 11 '20 at 05:26
  • You will need to provide a [mcve] – Patrick Evans Jan 11 '20 at 05:39

1 Answers1

2

In order to help you, You only need to iterate the items returned by document.getElementsByClassName ("img") in a for loop and assign the listener to each of them.

Here I put the snipet to illustrate the above:

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

var imgs = document.getElementsByClassName("img");
for(let img of imgs){
  img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  }
}
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

document.getElementsByClassName("close")[0].addEventListener('click',function() {
  modal.style.display = "none";
})
.row{
 display: flex;
 flex-wrap: wrap;
 padding: 0 4px;
 justify-content: center;
}

.column{
 flex: 1 0 22%;
 max-width: 25%;
 padding: 0 4px;
}

.column img{
 margin-top: 8px;
 vertical-align: middle;
 width: 100%;
 box-shadow: 3px 3px 2px grey;
 border-radius: 8px;
}


.img {
    cursor: pointer;
    transition: 0.3s;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* 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: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@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%;
  }
}
<!DOCTYPE html>
<html>
 <head>
  <title>Example</title>
 </head>
 <body>
  <div class="conta">
   <div class="row">
    <div class="column">
     <img class="img" alt="example" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
     <img class="img" alt="example" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
    </div>
    <div class="column">
     <img class="img" alt="example." src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
     <img class="img" alt="example"src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
     <img class="img" alt="example" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
    </div>
    <div class="column">
     <img class="img" alt="example" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
     <img class="img" alt="example" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
     <img class="img" alt="example" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
    </div>
    <div class="column">
     <img class="img" alt="example" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
     <img class="img" alt="example" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
     <img class="img" alt="example" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Bee_balm_seedhead_%2870424%29.jpg/1024px-Bee_balm_seedhead_%2870424%29.jpg">
    </div>
   </div> 
  </div>
  <div id="myModal" class="modal">
   <span class="close">&times;</span>
   <img class="modal-content" id="img01">
   <div id="caption"></div>
  </div>
  <script src="lightBox.js"></script>
 </body>
</html>
Luis Correa
  • 174
  • 1
  • 6