Invoking Photoswipe in mixed content blog posts

Question

I'm using Photoswipe on blog posts that contain mixed content, like images, but also text, videos etc., not so much separate galleries with just images. Executing Photoswipe on the entire post seems to apply to more than the <figure> elements alone, so I'm looking to be a bit more specific. I would like to invoke Photoswipe only on the <figure> elements, but I'm at a bit of a loss on how I would do that.

I think the main idea here is that this variable:

var thumbElements = el.childNodes

...should be more specific. So I need something like this to work:

var allElements = el.childNodes,
    thumbElements = allElements.getElementsByTagName("figure");

Except that doesn't work. Later on in the code, the figure elements are defined separately:

figureEl = thumbElements[i]; // <figure> element

So I'm a little lost here... I'd appreciate any help.

Answer 1

Okay, finally got it to work myself. For anyone else who may run into this, here's a better explanation of what I needed to work (I was a little vague in my initial question here), and how I got it to work.

In the documentation, Photoswipe provides a suggestion for how to implement it on a gallery, see the section How to build an array of slides from a list of links on http://photoswipe.com/documentation/getting-started.html What this implementation assumes, is that your gallery is just that: just a collection of images. However, I use Photoswipe on all my blog posts, and these blog posts consist of mixed content, including paragraphs and videos and whatnot.

The provided implementation code did not allow for this out of the box, so I made two small adjustment to make it work.

I changed this:

        // include only element nodes 
        if(figureEl.nodeType !== 1) {
            continue;
        }

Into this

        // include only elements of the FIGURE name
        if(figureEl.nodeName !== 'FIGURE') {
            continue;
        }

And following this concept, this:

        if(childNodes[i].nodeType !== 1) { 
            continue; 
        }

Into this:

        if(childNodes[i].nodeName !== 'FIGURE') {    
            continue; 
        }

Now, Photoswipe is not applied to all element nodes, but only child nodes that are more specifically of the FIGURE element type :)