将两张图片加载到我的模式时遇到问题

我正在为一位摄影师的客户创建一个网站。截至目前，他有几个照片类别，被点击后将加载该类别的图像幻灯片。如果在幻灯片中点击图像，我想要一个模式弹出，显示点击图像以及另一个图像点击图像div。目前，第一张照片加载但第二张不会。（我看着控制台，在那里，但它说src是未知的）有人可以帮我做到这一点？将两张图片加载到我的模式时遇到问题

<div id="myModal" class="modal"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class = "modal-body"> 
       <!-- Modal Content (The Image) --> 
       <img src="" id = "mimg" class = "modalimg"> 
       <img src="" id = "mimg2" class = "modalimg2"> 
      </div> 
     </div> 
     </div> 
    </div> 

<div class = "img1"> 
       <img src = "http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"> 
       <img src = "https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"> 
      </div> 

$("img").click(function(){ 
      var sr=$(this).attr('src'); 
      var parent = $(this).parent(); 
      var sr2 = $(parent).children('img1').eq(2); 
      $('#mimg').attr('src',sr); 
      $('#mimg2').attr('src',sr2); 
      $("#myModal").modal(); 
     });

来源

2017-06-20 Breevie

100d中的模态与唯一ID循环。 –

我建议你需要使用colorbox。这是一个JS插件非常容易使用，也充分满足您的愿望。 http://www.jacklmoore.com/colorbox/ –

您的脚本中有一些错误。只需使用以下代码片段更新您的脚本。

$("img").click(function(){ 
 
    var sr=$(this).attr('src'); 
 
    var parent = $(this).parent(); 
 
    var sr2 = $(this).siblings('img').attr('src'); 
 
    $('#mimg').attr('src',sr); 
 
    $('#mimg2').attr('src',sr2); 
 
    $("#myModal").modal(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div id="myModal" class="modal"> 
 
     <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class = "modal-body"> 
 
       <!-- Modal Content (The Image) --> 
 
       <img src="" id = "mimg" class = "modalimg"> 
 
       <img src="" id = "mimg2" class = "modalimg2"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
<div class = "img1"> 
 
       <img src = "http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"> 
 
       <img src = "https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"> 
 
      </div>

来源

2017-06-20 05:16:08

非常感谢你！你是一个拯救生命的人 – Breevie

将两张图片加载到我的模式时遇到问题

回答

相关问题