v5-beta FR option to collect the item data during script load/init not later
Currently, it seems that the items will be collected when lightbox opens first.
This is a problem if the dom will be manipulated with other scripts before. for instance, a masonry script that re-orders the dom items.
What to do if the order of the images in the light box should correspond to the natural html output not to the later manipulated order?
I have to build the dataSource array and add an event to every item manually (like shown below) !
But is this really necessary? All other lightbox script collecting the items during script initialization and not on first click.
I really recommend to change this or an option should be added to define when to collect the elements with gallerySelector and childSelector. This could really save unnecessary code.
let items = document.querySelectorAll('.items .image');
let galleryData = [];
forEach(items, function(o) {
let data = {
srcset: o.getAttribute('data-pswp-srcset'),
src: o.getAttribute('href'),
w: Number(o.getAttribute('data-pswp-width')),
h: Number(o.getAttribute('data-pswp-height')),
element: o
}
o.addEventListener('click',(e)=>{
e.preventDefault();
lightboxGallery.loadAndOpen(parseInt(e.currentTarget.getAttribute('data-index')));
})
galleryData.push(data);
})
const lightboxGallery = new PhotoSwipeLightbox({
// may select multiple "galleries"
// gallerySelector: '.items',
// Elements within gallerySelector (slides)
// childSelector: '.image',
dataSource:galleryData,
...