Question

我一直在使用bootstrap 4构建一个Bootstrap灯箱库，以及来自这个Bootply的代码https://www.bootply.com/KBspXYVjaX#

该代码中唯一已更改的元素是代替附加img-responsive class的图片，而是使用img-fluid以及使用的图片少得多。

灯箱库按预期完美运行，但在iPhone等移动设备上，图库图像不会按比例缩小以匹配设备屏幕尺寸。

非常感谢任何帮助。

以下代码：

<div class="container">
  <div id="img-container" class="row rocagallery">
    <a href="http://www.google.com/" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg" class="img-fluid sunsetlogoimg"></a>
    <div class="row">
      <div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 1"><img src="https://www.sanctuary-care.co.uk/sites/default/files/styles/article_image/public/quick_media/2017-06-12-seaside-celebrations.jpg?itok=IPhSIk8o&c=50144a4bc63c7307e37cc698b2e1038c" class="thumbnail img-fluid"></a></div>
      <div class="col-lg-3 col-sm-4 col-6"><a href="#" title="Image 2"><img src="https://www.sanctuary-care.co.uk/sites/default/files/styles/article_image/public/quick_media/2017-06-12-seaside-celebrations.jpg?itok=IPhSIk8o&c=50144a4bc63c7307e37cc698b2e1038c" class="thumbnail img-fluid"></a></div>
    </div>
  </div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3 class="modal-title">Heading</h3>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button id="prev-btn" class="btn btn-warning">Prev</button>
        <button id="next-btn" class="btn btn-primary">Next</button>
    <button class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
   </div>
  </div>
</div>

JS适用于Next＆amp;以前的按钮，以便用户可以在我没有遇到问题的图像之间切换：

$('.thumbnail').click(function(){
    $('.modal-body').empty();
    var title = $(this).parent('a').attr("title");
    $('.modal-title').html(title);
    $($(this).parents('div').html()).appendTo('.modal-body');
    $('#myModal').modal({show:true});
});

$('#next-btn').click(function() {
 var link = $('.modal-body a');
  var number = parseInt(link.attr('title').match(/\S+$/));
  number++;
  if(number === 13) {
  number = 1;
  }
  $('.modal-body').html($('#img-container').find('a[title="Image ' + number + '"]').parent('div').html());
  $('.modal-title').text('Image ' + number);
});
$('#prev-btn').click(function() {
 var link = $('.modal-body a');
  var number = parseInt(link.attr('title').match(/\S+$/));
  number--;
  if(number === 0) {
  number = 12;
  }
  $('.modal-body').html($('#img-container').find('a[title="Image ' + number + '"]').parent('div').html());
  $('.modal-title').text('Image ' + number);
});

Bootstrap Modal Lightbox没有响应

0 个答案: