在灯箱中打开不同的图像

Question

我在Bootstrap中有一个图片灯箱，我想实现的是当用户点击图片时，弹出的图片是不同的。

所以我会有拇指图标，当用户点击其中一个时，完整的图像就会显示出来。所以代码如下：

<a href="full_Image_url" ..> <img src="thumb_img_url" ...></a>

我尝试用另一张图片的位置编辑 <a href="#" ..>，但没成功..

var $lightbox = $('#lightbox');

$('[data-target="#lightbox"]').on('click', function(event) {
  var $img = $(this).find('img'),
    src = $img.attr('src'),
    alt = $img.attr('alt'),
    css = {
      'maxWidth': $(window).width() - 100,
      'maxHeight': $(window).height() - 100
    };

  $lightbox.find('.close').addClass('hidden');
  $lightbox.find('img').attr('src', src);
  $lightbox.find('img').attr('alt', alt);
  $lightbox.find('img').css(css);
});

$lightbox.on('shown.bs.modal', function(e) {
  var $img = $lightbox.find('img');

  $lightbox.find('.modal-dialog').css({
    'width': $img.width()
  });
  $lightbox.find('.close').removeClass('hidden');
});

body {
  padding: 30px 0px;
}

#lightbox .modal-content {
  display: inline-block;
  text-align: center;
}

#lightbox .close {
  opacity: 1;
  color: rgb(255, 255, 255);
  background-color: rgb(25, 25, 25);
  padding: 5px 8px;
  border-radius: 30px;
  border: 2px solid rgb(255, 255, 255);
  position: absolute;
  top: -15px;
  right: -55px;
  z-index: 1032;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="col-xs-6 col-sm-3">
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
      <img src="https://s3.amazonaws.com/ooomf-com-files/lqCNpAk3SCm0bdyd5aA0_IMG_4060_1%20copy.jpg" alt="...">
    </a>
  </div>

  <div class="col-xs-6 col-sm-3">
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
      <img src="https://s3.amazonaws.com/ooomf-com-files/Z3LXxzFMRe65FC3Dmhnp_woody_unsplash_DSC0129.jpg" alt="...">
    </a>
  </div>
</div>

<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
    <div class="modal-content">
      <div class="modal-body">
        <img src="" alt="" />
      </div>
    </div>
  </div>
</div>

Answer 1

您已将事件处理程序附加到 <a data-target="#lightbox'> 的单击事件。你可以找到它的父 div 然后是下一个兄弟 div 和里面的图像。如果最后 div 你可以是第一个兄弟姐妹。像这样：

var $lightbox = $('#lightbox');

$('[data-target="#lightbox"]').on('click', function(event) {
    var imageDiv = $(this).parent().is(':last-child') ? $(this).parent().siblings().first() : $(this).parent().next();
    var $img = $(imageDiv).find('img'),
    src = $img.attr('src'),
    alt = $img.attr('alt'),
    css = {
      'maxWidth': $(window).width() - 100 ,
      'maxHeight': $(window).height() - 100
    };

  $lightbox.find('.close').addClass('hidden');
  $lightbox.find('img').attr('src', src);
  $lightbox.find('img').attr('alt', alt);

});

$lightbox.on('shown.bs.modal', function(e) {
  var $img = $lightbox.find('img');

  $lightbox.find('.modal-dialog').css({
    'width': $img.width()
  });
  $lightbox.find('.close').removeClass('hidden');
});

body {
  padding: 30px 0px;
}

#lightbox .modal-content {
  display: inline-block;
  text-align: center;
}

#lightbox .close {
  opacity: 1;
  color: rgb(255, 255, 255);
  background-color: rgb(25, 25, 25);
  padding: 5px 8px;
  border-radius: 30px;
  border: 2px solid rgb(255, 255, 255);
  position: absolute;
  top: -15px;
  right: -55px;
  z-index: 1032;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="col-xs-6 col-sm-3">
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
      <img src="https://s3.amazonaws.com/ooomf-com-files/lqCNpAk3SCm0bdyd5aA0_IMG_4060_1%20copy.jpg" alt="...">
    </a>
  </div>

  <div class="col-xs-6 col-sm-3">
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
      <img src="https://s3.amazonaws.com/ooomf-com-files/Z3LXxzFMRe65FC3Dmhnp_woody_unsplash_DSC0129.jpg" alt="...">
    </a>
  </div>
</div>

<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
    <div class="modal-content">
      <div class="modal-body">
        <img src="" alt="" />
      </div>
    </div>
  </div>
</div>

在灯箱中打开不同的图像

Open different image in lightbox

html

javascript

jquery

lightbox