图片点击打开图片专辑的灯箱

Question

我正在尝试创建一个lightbox相册。

目前，我可以在互联网上找到的只是一张包含当前图像集相册的灯箱。我期望完成的是为每个点击的图像分配一个专辑。

例如，如果我点击了lightbox图片1，它会打开一张专门为该图片定义的图片专辑。 2和3也一样。

例如图片：

Answer 1

老实说，我觉得你的情况最好的解决办法是让隐藏在页面的所有专辑，当你点击图片，你就显示出相应的专辑。这是我的意思是一个非常简单的例子：

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

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

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

 

 
$('.close').on('click', function(e) { 
 
\t 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>