how to load dynamic images into a slideshow

Question

I want to create a page where the user can choose the images that will be shown in a slideshow. I'm attempting to use imgchecked.js and would like to use lightgallery.js.

How can I pass an array of images into the dynamicEL? Is there a way to load the images using the class imgchecked?

Any help is greatly appreciated. And apologies in advance for being new at coding.

Here is a jsfiddle that only seems to be slightly working in chrome: imgcheckbox with lightgallery - https://jsfiddle.net/ssab/cydgs40n/13/ Thanks

<div class="slides">
   <ul>
       <li><img src="001.jpg" /></li>
       <li><img src="002.jpg" /></li>
       <li><img src="003.jpg" /></li>
       <li><img src="004.jpg" /></li>
   </ul>
   <button id="dynamic">Launch Gallery</button>
</div>

And the JS:

$(".slides img").imgCheckbox();

$('#dynamic').on('click', function() {
   $(this).lightGallery({
       dynamic: true,
       dynamicEl: [{ }]
   });
});

Answer 1

I couldn't make code formatting well but you can find your solution here http://codepen.io/anon/pen/NbGzPM?editors=1111

The idea is you have to prepare object array each time dynamic button clicked and pass that array to dynamicEL.

Note: please clean and improve sample code before use or let me know.