Image click opens lightbox for album of specific images

Question

I am attempting to create a lightbox album.

Currently, all that I can find on the internet is a lightbox that has an album of the current image set. What I am looking to accomplish is to have a separate album for each image that is clicked.

For example, if I click lightbox image 1, it opens up an album of images specifically defined for that image. Same for 2 and 3 as well.

Image of example:

Answer 1

Honestly I think in your case the best solution would be to have all the albums hidden in the page, and when you click on an image you just show the corresponding album. This is a really simple example of what I mean:

 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>