PhotoSwipe icon indicating copy to clipboard operation
PhotoSwipe copied to clipboard

v5-beta FR option to collect the item data during script load/init not later

Open amkdev opened this issue 4 years ago • 0 comments

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,
       ...

amkdev avatar Jul 20 '21 13:07 amkdev