Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by David Loder
David Loder
4,987 Points

Cannot get this modal effect to work. Any ideas?

Hey everyone. So I'm having issues with getting this modal to work with an image gallery. The idea is to have the images use a modal effect but can only get the caption to work. Any ideas on how to fix it? 

<div class="container">
    <div class="row" id="gallerygrid">
      <div class="column"> 
          <img class="myImg" src="images/IMG_6355.JPG" alt="Atlas GE U30C, as the Reading #6302"> 
          <img class="myImg" src="images/IMG_6356.jpg" alt="Kato SD40R as Conrail #6972"> 
          <img class="myImg" src="images/IMG_6369.jpg" alt="Walthers Penn Central Gondola #598212"> 
          <img class="myImg" src="images/IMG_6370.jpg" alt=""> 
          <img class="myImg" src="images/IMG_6371.jpg" alt=""> 
          <img class="myImg" src="images/IMG_6372.jpg" alt=""> 
          <img class="myImg" src="images/IMG_6994.JPG" alt=""> 
        </div>
      <div class="column"> 
          <img class="myImg" src="images/IMG_6985.JPG" alt="Kato EMD C&amp;O SD40 #7497, Custom Painted"> 
          <img class="myImg" src="images/IMG_6984.JPG" alt=""> 
          <img class="myImg" src="images/IMG_6986.JPG" alt=""> 
          <img class="myImg" src="images/IMG_6983.JPG" alt=""> 
          <img class="myImg" src="images/IMG_7003.JPG" alt=""> 
          <img class="myImg" src="images/IMG_6992.JPG" alt=""> 
        </div>
      <div class="column"> 
          <img src="wedding.jpg"> 
          <img src="rocks.jpg"> 
          <img src="falls2.jpg"> 
          <img src="paris.jpg"> 
          <img src="nature.jpg"> 
          <img src="mist.jpg"> 
          <img src="paris.jpg"> 
        </div>
      <div class="column"> 
          <img src="underwater.jpg"> 
          <img src="ocean.jpg"> 
          <img src="wedding.jpg"> 
          <img src="mountainskies.jpg"> 
          <img src="rocks.jpg"> 
          <img src="underwater.jpg"> 
        </div>
      <!-- The Modal -->
      <div id="myModal" class="modal">
        <!-- The Close Button -->
        <span class="close">&times;</span>
        <!-- Modal Content (The Image) -->
        <img class="modal-content" id="modal-image">
        <!-- Modal Caption (Image Text) -->
        <div id="caption"></div>
      </div>
    </div>
  </div>

.row #gallerygrid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

// 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 = $("#modal-image");
var captionText = document.getElementById("caption");
img.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";
}
David Loder
David Loder
4,987 Points

if more code is required let me know. I use bootstrap and a little css for the grid which i'll add now

1 Answer

Artur Markov
Artur Markov
3,447 Points
Artur Markov
Artur Markov
3,447 Points

"img.click" looks wrong to me... If you use bootstrap, if think it shoul be img.on("click", function(){}" And did you put <script> tags for bootstrap into you html body?