I’m trying to implement a Lightbox gallery where clicking an image link launches a slideshow of images that are loaded from an array, not from inline content on the page. All the examples I can find use a group of inline images. I am using a framework called UIkit (https://https://getuikit.com/docs/introduction) which has a "lightbox" class.
My Html looks like this:
<div class="[email protected]" uk-grid uk-lightbox="animation: fade"> <div> <a class="uk-inline" href="images/dark.jpg"> <img src="images/photo.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="images/light.jpg"> <img src="images/dark.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="images/photo.jpg"> <img src="images/light.jpg" alt=""> </a> </div> </div>
Can anyone think of a way to implement the lightbox using the images called from the array so we don’t have to see each individual image on the actual page (one image links to a lightbox containing more of that theme) and what the JS/html would look like?
Thank you in advance! Still new to JS and learning! : )