单击时从文本链接在自举灯箱模式中显示不同的图像

Question

您好，我真的需要一些帮助来尝试解决Lightbox自举问题。我有一个带有文本链接列表的网页。单击每个文本链接时，我需要Lightbox模式以为每个文本链接显示不同的图像。

到目前为止，我已经将我的文本链接ID和目标图像放置在一个数组中。

文本链接具有分配给它们的单击功能。

点击功能会显示灯箱，但不会显示图像。 我不确定是循环问题还是变量问题，或者两者兼而有之。

下面的代码是我到目前为止所拥有的。

任何帮助将不胜感激！

window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')

$(document).ready(function(){
        var $imgarr = ['https://picsum.photos/800/406','https://picsum.photos/800/404','https://picsum.photos/800/402','https://picsum.photos/800/400'];
    
        var $lightbox = $('#lightbox');
        var $btnlightboxarr = document.getElementById(['linkbtn0','linkbtn1', 'linkbtn2', 'linkbtn3']);
        var $btnarr = $btnlightboxarr;  
        
       $('[data-target="#lightbox"]').on('click', function(event) {
                
           
                for (var i = 0; i < $imgarr.length; i++) {
                   var $btnarr = $imgarr[i];
                            };
           
                var $img = $(imgarr[i]).attr('img'),
                    $currentsrc = $img.attr('src'), alt = $img.attr('alt'),
                            css={
                                'maxWidth':$(window).width()-100,
                                'maxHeight':$(window).height()-100
                    };
    });
        $lightbox.on('shown.bs.modal', function (e) {   
        $currentsrc = $lightbox.find('src')
        $lightbox.find('.modal-dialog').css({'width':  $img.width()});
        $lightbox.find('.close').removeClass('hidden');
    });
});        

h4,
.h4 {
  font-size: 1.5rem;
  color: #0070bb;
}

h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

.container {
  width: 75%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 35px;
  padding-bottom: 35px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>


<main role="main">
  <div class="container">
    <div>
      <h3>cool image 1 </h3>
      <a href="#" id="linkbtn0" data-toggle="modal" data-target="#lightbox">
        <h5>Click here to see example</h5>
      </a>
    </div>
    <div>
      <h3>cool image 2 </h3>
      <a href="#" id="linkbtn1" data-toggle="modal" data-target="#lightbox">
        <h5>Click here to see example</h5>
      </a>
    </div>
    <div>
      <h3>cool image 3 </h3>
      <a href="#" id="linkbtn2" data-toggle="modal" data-target="#lightbox">
        <h5>Click here to see example</h5>
      </a>
    </div>
    <div>
      <h3>cool image 4</h3>
      <a href="#" id="linkbtn3" data-toggle="modal" data-target="#lightbox">
        <h5>Click here to see example</h5>
      </a>
    </div>
    <div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-lablelledby="myLargModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">x</button>
        <div class="modal-content">
          <div class="modal-body">
            <img src="" alt="" />
          </div>
        </div>
      </div>

    </div>

  </div>
</main>