PhotoSwipe icon indicating copy to clipboard operation
PhotoSwipe copied to clipboard

How to fetch slide properties?

Open acwolff opened this issue 3 years ago • 1 comments

@dimsemenov could you please extend the documentation with hints how to get properties of a slide.

For instance in the 'contentActivate' I need to know whether the loaded slide is an image.

I trried:

    isImage=false;
    if (e.content.element.querySelector('img')) isImage=true;

but that does not work.

After several other tries I ended with this rather clumsy code:

lightbox.on('contentActivate', (e) => {
    slide_index=lightbox.pswp.currSlide.index;
    isVideo=false;
    isAudio=false;
    isIframe=false;
    isImage=false;
    if (e.content.element.querySelector('video')) isVideo=true;
    if (e.content.element.querySelector('audio')) isAudio=true;
    if (e.content.element.querySelector('iframe')) isIframe=true;
    isImage= !isVideo && !isAudio && !isIframe;

In the future I need more information, for instance the slide dimensions and I like to start YouTube and Vimeo videos automatically, so I need to know whether the iframe contains a YouTube a Vimeo video

This type of information can probably be retrieved from lightbox.pswp.currSlide and / or e.content.element but I do not know how. So some hints from you are highly appreciated.

acwolff avatar Apr 13 '22 13:04 acwolff

You can check the type of a slide via content.type.

To add a custom content type - add data-pswp-type attribute to your link that opens PhotoSwipe.

I clarified a bit docs here - https://photoswipe.com/custom-content/#google-maps-demo

dimsemenov avatar Apr 13 '22 13:04 dimsemenov