Opening a modal on click image (with multiple images using single modal)

Question

I'm trying to create a photos page for my webpage and on click of the image I want to open a modal to view the image full screen (more of less). I found this tutorial on using a modal to enlarge an image - https://www.w3schools.com/howto/howto_css_modal_images.asp

However I'm not sure if there is a simpler way to enlarge an image on click given that there are multiple images on the page and there is one modal.

Is the only way to create a separate ID for each image or is there a selector in JS to select multiple images at once?

Here's the JSfiddle - https://jsfiddle.net/definaly/89roukqd/2/

// 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 = $(".myImg");
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;
}

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

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

/* Style the Image Used to Trigger the Modal */
.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {
  opacity: 0.7;
  }

/* The Modal (background) */
.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%;
  }
}

×

Thanks in advance

user_1264804 · Answer

I made a lot of changes to take advantage of jQuery and abstract out IDs. Feel free to ask about any of them.

Demo

// Get the modal
var modal = $("#myModal");
var modalImg = modal.find('.modal-content');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $(".myImg");
var captionBox =$("#caption");

img.click(function() {
    modalImg.attr('src', $(this).attr('src'));
    captionBox.text( $(this).attr('alt') );
    modal.show();
});

// Get the elements that closes the modal
var modalCloser = $(".close");

// When the user clicks on the close element, close the modal
modalCloser.click(function() {
    modal.hide();
});

A couple general suggestions:

Use semantic variable names. If you call something 'span' and change the element type in the markup you now have a mismatch. Instead, use a name that describes its function.
When setting handlers on something like openers or closers, use jQuery class selectors that grab multiple elements. This way you can open and close from more than one place.
Get to know all jQuery's common methods. They'll save you much typing, and I've found them to be so intuitive that it takes very little effort to memorize them.
Use single quotes for JS and double for HTML. This eliminates most need to escape them when nesting one into the other. The jQuery docs use double for everything, but heck with that.
Consider migrating to let and const instead of var. Scoping is more precise and modern IDEs won't be constantly suggesting you do so.

user_2789979 · Answer

I have just modified your code in HTML and JS.

Here is the Demo link - Demo

Added Onclick Function in HTML Code

Added Same Function in JS Code.

// 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 = $(".myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    function image(event)  {    
        modal.style.display = "block";
        modalImg.src = event.target.src;
        captionText.innerHTML = event.target.alt;
    }

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

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

Opening a modal on click image (with multiple images using single modal)

2 Answers

I have just modified your code in HTML and JS.

Here is the Demo link - Demo

Added Onclick Function in HTML Code

Added Same Function in JS Code.