圖片點擊打開圖片專輯的燈箱

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>