點擊圖片即可打開燈箱，顯示特定圖片的相冊

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>