点击图片即可打开灯箱，显示特定图片的相册

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>