图片点击打开特定图片相册的灯箱

Question

我正在尝试制作一个灯箱相册。

目前，我在互联网上找到的所有内容都是一个灯箱，其中包含当前图像集的相册。我想要完成的是为每个被点击的图像设置一个单独的专辑。

例如，如果我单击灯箱图像1，它会打开专门为该图像定义的图像专辑。同样适用于2和3。

示例图片：

Answer 1

老实说，我认为在您的情况下，最好的解决方案是将所有相册隐藏在页面中，当您点击图像时，您只需显示相应的相册。这是我的意思的一个非常简单的例子：

var showAlbum = function(id) {
	$('#' + id).addClass('visible');
}

$('.album-trigger').on('click', function(e) {
	e.preventDefault();
  showAlbum($(this).attr('data-target'));
});

var closeAlbum = function($elem) {
	$elem.parent().removeClass('visible');
}


$('.close').on('click', function(e) {
	e.preventDefault();
  closeAlbum($(this));
})

.album {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .8);
  display: none;
}

.album.visible {
  display: block;
}

.album h2 {
  color: white;
}

.album img {
  border: 5px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="album-trigger" href="#" data-target="album-1"><img src="http://placehold.it/200x200" alt="#"></a>
<a class="album-trigger" href="#" data-target="album-2"><img src="http://placehold.it/200x200" alt="#"></a>

<div class="album" id="album-1">
  <a class="close" href="#">Close</a>
  <h2>Album1</h2>
  <ul class="album-images">
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
  </ul>
</div>

<div class="album" id="album-2">
  <a class="close" href="#">Close</a>
  <h2>Album2</h2>
  <ul class="album-images">
    <li><img src="http://placehold.it/200x200" /></li>
  </ul>
</div>