模式图像返回未定义的红宝石/轨道生成图像，适用于静态图像

Question

Hello stackoverflow社区。

我正在尝试将多个图像模态添加到带有图像的简单Rails博客文章中。

我使用带有简单posts.each循环的帖子生成器来生成帖子。但是，当使用javascript创建图像模态时，由.each循环生成的图像只是在模态中返回404 image not found。为了进行测试，我链接了一些静态图像，并且使用内部图像成功创建了模态。

我认为这与在ruby代码之前执行的javascript有关，但是我不确定。

//RUBY CODE to generate posts
        <div class="projectcolumn">
      <% @posts.each do |post| %>
        <div class="blurbox">
          <h1><%= post.title %></h1>
          <p><%= post.content %></p>
          <div class="postimage" id="myImg">
            <%= image_tag(post.image)%>
          </div>
        </div>

      <% end %>

//static images I used to test if the modal is working    
      <img class="postimage" id="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
    <img class="postimage" id="myImg" src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway"
    width="300" height="200">
    <img class="postimage" id="myImg" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">


//the modal div
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    </div>

    <script>// create references to the modal...
    var modal = document.getElementById('myModal');
    // to all images -- note I'm using a class!
    var images = document.getElementsByClassName('postimage');
    // the image in the modal
    var modalImg = document.getElementById("img01");
    // and the caption in the modal
    var captionText = document.getElementById("caption");

    // Go through all of the images with our custom class
    for (var i = 0; i < images.length; i++) {
      var img = images[i];
      // and attach our click listener for this image.
      img.onclick = function(evt) {
        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";
    }
    </script>

我以为通过将脚本标签放在index.html.erb文件的末尾，将在所有图像生成之后对javascript进行编译。这种思路是否有缺陷？

Answer 1

另一个站点上的有用用户为我解决了此问题。

javascript

<script>
  document.addEventListener("DOMContentLoaded", modalMaker);

  function modalMaker() {

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


  }
</script>

红宝石/ HTML代码

<div class="projectcolumn">
  <% @posts.each do |post| %>
    <div class="blurbox">
      <h1><%= post.title %></h1>
      <p><%= post.content %></p>
      <div class="postimage">
        <%= image_tag(post.image, alt: "caption")%>
      </div>
    </div>
  <% end %>
  <!-- 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="img01">
    <!-- Modal Caption (Image Text) -->
    <div id="caption"></div>
  </div>
</div>

CSS

/* 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%;
  }
}