画像クリックすると、特定の画像のアルバムのライトボックスが開きます

Question

ライトボックスアルバムを作成しようとしています。

現在、インターネット上で見つかることのできるものは、現在の画像セットのアルバムを持つライトボックスです。私が達成しようとしているのは、クリックされた画像ごとに別々のアルバムを用意することです。

たとえば、ライトボックス画像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>