0

I'm trying to get this (https://www.w3schools.com/howto/howto_css_modal_images.asp) on a gallery I have. I have gotten that to work successfully but it only works on one image and isn't replicable for the gallery as it only works on one image.

I found this guy had posted the same issue 3 years ago (Modal image galleries - multiple images)so I've been trying to follow that fix but have been unable.

I've been following the CSS and the JS cues from the link

// 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 = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function() {
  modal.style.display = "block";
  var newSrc = this.src;
  modalImg.attr('src', newSrc);
  captionText.innerHTML = this.alt;
});

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

// When the user clicks on <span> (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 {
  -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%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Trigger the Modal -->
<img id="SD" class="myImg" src="SD.jpg" alt="SD B">

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="modal-image">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
LosBluefist
  • 1
  • 2
  • I made you a snippet. Please fix it with images from placeholder.com or lorempixel to make a [mcve] with more than one image – mplungjan Dec 19 '20 at 09:17
  • Hey, @mplungjan, thanks for the reply. When I try and edit the post to include the stuff you asked for I get a ton of indexing errors, Would it be OK to pull the question and repost it with the info do you think. Also, not familiar with the lingo on the site.What does I made you a snippet mean? – LosBluefist Dec 19 '20 at 09:53
  • I clicked `[<>]` to create a stack snippet. Click edit, then scroll down and click “edit above snippet” – mplungjan Dec 19 '20 at 10:08

1 Answers1

-1

Here is the fully working code: https://jsfiddle.net/dmvshn/75ueLgbt/

to add new image use tag img with class="myImg": 

< img class="myImg" src="link to picture" alt="some note" width="300" height="200" >
Nigrimmist
  • 10,289
  • 4
  • 52
  • 53
dm-mrtnvch
  • 1
  • 1
  • Thank you very much man. Could you tell me where I was going wrong by any chance? Can't see it myself and I've been stuck with this problem for days – LosBluefist Dec 19 '20 at 10:19