在混合内容博客文章中调用 Photoswipe

Question

我在博客 post 上使用 Photoswipe，它包含混合内容，如图像，还有文本、视频等，而不是只有图像的单独画廊。对整个 post 执行 Photoswipe 似乎不仅仅适用于 <figure> 元素，所以我希望更具体一些。我想仅在 <figure> 元素上调用 Photoswipe，但我有点不知如何去做。

我认为这里的主要思想是这个变量：

var thumbElements = el.childNodes

...应该更具体一些。所以我需要这样的东西才能工作：

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

除非那不起作用。稍后在代码中，图形元素被单独定义：

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

所以我有点迷路了...我很感激任何帮助。

Answer 1

好的，终于让我自己工作了。对于可能运行参与其中的任何其他人，这里有一个更好的解释，说明我需要做什么（我在这里最初的问题有点含糊），以及我是如何让它工作的。

在文档中，Photoswipe 提供了有关如何在图库上实施它的建议，请参阅 如何从链接列表 构建幻灯片数组部分 http://photoswipe.com/documentation/getting-started.html 此实现假设的是，您的画廊就是这样：只是图像的集合。但是，我在所有博客文章中都使用 Photoswipe，这些博客文章由混合内容组成，包括段落和视频等等。

提供的实现代码不允许开箱即用，因此我做了两个小调整以使其工作。

我改变了这个：

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

进入这个

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

按照这个概念，这个：

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

进入这个：

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

现在，Photoswipe 不会应用于所有元素节点，而只会应用于更具体的 FIGURE 元素类型的子节点:)

在混合内容博客文章中调用 Photoswipe

Invoking Photoswipe in mixed content blog posts

photoswipe