mero mero - 28 days ago 14
Javascript Question

how to load dynamic images into a slideshow

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

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.