模态画廊-不会显示多个图像

问题描述 投票：0回答：1

// 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 = $("#modalImage");
var captionText = document.getElementById("caption");
img.on("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";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stony Creek Prototypes</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<link rel="stylesheet" href="css/image-grid.css">
<link rel="stylesheet" href="css/modal.css">
<style type="text/css">
@font-face {
    font-family: RailRoadFont;
    src: url("SCPrototypes/fonts/railroader/Railroader.ttf")
}
#header {
    background-size: cover;
    background-position: center;
    background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("images/IMG_6354.JPG");
    background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("/images/IMG_6354.JPG");
    background-image: -o-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("/images/IMG_6354.JPG");
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/IMG_6354.JPG");
}
#gallery1 {
    background-size: cover;
    background-position: center;
    background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("images/image000000.jpg");
background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("images/image000000.jpg");
    background-image: -o-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("images/image000000.jpg");
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/image000000.jpg");
}
</style>
<!-- Jquery Link -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#"><img src="images/Stony-Creek-Nav-Brand.png" alt=""></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
      <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li>
    </ul>
  </div>
</nav>
<section>
  <div class="jumbotron text-center" id="header">
    <div class="container">
      <div class="row">
        <div class="col-12 text-white"> <img style="opacity: .85;" class="img-fluid" src="images/Stony Creek Logo.png" width="652" height="420" alt=""/> </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col-12 text-center" id="about">
        <h1>Welcome to Stony Creek Prototypes</h1>
        <p>Thank you for visiting my site. My name is Matt Arentzen and I have been a professional airbrush artist for over twenty-three years. My specialty has always been with custom painting and assembly of Class-One fallen flags, modern equipment, rolling stock and locomotives. I like to work with most shortlines &amp; regionals, but love to work with freelance railroads. Check out my portfolio below and if questions feel free to contact me.</p>
        <button type="button" class="btn btn-lg btn-dark">
        <a class="text-white" href="#contact">Contact me</a>
        </button>
      </div>
    </div>
  </div>
</section>
<br>
<section>
  <div class="jumbotron text-center border-3" id="gallery1">
    <div class="container">
      <div class="row">
        <div class="col-12 text-white">
          <h2>Latest Work and Portfolio</h2>
          <p> A collection of accomplished scale models.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row" id="gallerygrid">
      <div class="column"> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6355.JPG" alt="Atlas GE U30C, as the Reading #6302" > 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6356.jpg" alt="Kato SD40R as Conrail #6972"> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6369.jpg" alt="Walthers Penn Central Gondola #598212"> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6370.jpg" alt=""> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6371.jpg" alt=""> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6372.jpg" alt=""> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6994.JPG" alt=""> 
        </div>
      <div class="column"> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6985.JPG" alt="Kato EMD C&amp;O SD40 #7497, Custom Painted"> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6984.JPG" alt=""> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6986.JPG" alt=""> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6983.JPG" alt=""> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_7003.JPG" alt=""> 
          <img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/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="modalImage">
        <!-- Modal Caption (Image Text) -->
        <div id="caption"></div>
      </div>
    </div>
  </div>
  <!--<div class="row">
      <div class="col-md-6 col-12 text-center"> <img class="img-fluid" src="images/IMG_6355.JPG" alt="">
        <h4>Atlas GE U30C</h4>
        <h6>Custom painted after the Reading #6302</h6>
      </div>
      <div class="col-md-6 col-12 text-center mt-md-0 mt-2"> <img class="img-fluid" src="images/IMG_6356.JPG" alt="">
        <h4>Kato SD40R</h4>
        <h6>Based off Conrail #6972</h6>
      </div>
    </div>
  </div>
  <div class="row mt-2">
    <div class="col-md-4 col-12 text-center"><img class="img-fluid float-right" src="images/IMG_6369.JPG" alt="">
      <h5>Walthers Penn Central Gondola</h5>
      <h6>#598212</h6>
    </div>
    <div class="col-md-4 col-12 text-center"><img class="img-fluid float-left" src="images/IMG_6370.JPG" alt="">
      <h5>Kato Penn Central SD40 #6065</h5>
      <h6>Custom painted with heavy weathering.(a.k.a. "Deffered Maintenance Scheme")</h6>
    </div>
    <div class="col-md-4 col-12 text-center"><img class="img-fluid float-right" src="images/IMG_6372.JPG" alt="">
      <h5>Bowser RDG Alco #5308</h5>
      <h6>Is the only C630 in existence and made with custom weathering</h6>
    </div>
  </div>-->
  <hr>
</section>
<hr>
<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="text-center">Contact</h2>
    </div>
  </div>
</div>
<hr>
<div class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-12">
        <h3 class="text-center">Contact Info</h3>
        <address class="text-center">
        <strong>Stony Creek Prototypes</strong><br>
        <abbr title="Phone">P:</abbr> +1 (999) 999-9999 <br>
        <abbr title="Email">E: </abbr><a href="mailto:[email protected]">[email protected]</a>
        </address>
      </div>
      <div class="col-md-6 col-12">
        <h3 class="text-center">Send a Message</h3>
        <form name="contact" netlify>
          <div class="form-group col-12" id="contact">
            <input type="text" class="form-control" id="firstName" placeholder="First Name">
            <input type="text" class="form-control" id="lastName" placeholder="Last Name">
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
            <textarea name="message" class="form-control" id="" cols="30" rows="3" placeholder="Describe your project"></textarea>
            <button type="submit" class="btn btn-dark mt-2">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<hr>
<footer class="text-center">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <p>Copyright © SCPrototypes 2020. All rights reserved.</p>
        <p>Designed &amp; Developed by <a href="https://davidloder.com">David Loder</a></p>
      </div>
    </div>
  </div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script src="js/modal.js"></script>
</body>
</html>

因此，我正在阅读这篇文章，了解如何使用模式效果制作多幅图像。原始帖子在这里。Modal image galleries - multiple images。我使用了http://www.w3schools.com/howto/howto_css_modal_images.asp及其方法，然后更改了代码以使用网格类型的图像库。

我可以显示图片标题，但是我无法显示图片。有什么想法吗？javascript代码确实使用了一些JQuery。

javascript jquery html css twitter-bootstrap
1个回答
0
投票

看起来问题在于设置src-特别是Jquery中的.attr（）方法。它是要执行的功能，而不是为其设置值。 

// Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = $('.myImg');
    var modalImg = $("#modalImage");
    var captionText = document.getElementById("caption");
    img.on("click",function () {
      modal.style.display = "block";
      var newSrc = this.src;
      modalImg.attr = ('src', newSrc);
      captionText.innerHTML = this.alt;
    });

更改：

modalImg.attr = ('src', newSrc);

to

modalImg.attr('src', newSrc);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.