отображать различные изображения в начальной загрузке лайтбокса из текстовых ссылок при нажатии - PullRequest
Новая
       33

отображать различные изображения в начальной загрузке лайтбокса из текстовых ссылок при нажатии

0 голосов
/ 03 октября 2018

Привет, мне действительно нужна помощь, пытаясь решить проблему Lightbox.У меня есть веб-страница со списком текстовых ссылок.Когда нажата каждая текстовая ссылка, мне нужно, чтобы модал Lightbox отображал разные изображения для каждой текстовой ссылки.

До сих пор я помещал свои идентификаторы текстовых ссылок в массив, а также целевые изображения..

Для текстовых ссылок назначена функция щелчка.

Функция щелчка отображает лайтбокс, но изображения не отображаются.Я не уверен, является ли это проблема цикла или проблема переменной или оба.

Код ниже - это то, что у меня есть.

Любая помощь будет принята с благодарностью!

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>
...