Question

我在包含混合内容的博客文章中使用了Photoswipe，例如图片，还包括文字，视频等，而不是只有图片的单独画廊。在整个帖子上执行Photoswipe似乎仅适用于<figure>元素，因此我希望更具体一些。我想仅在<figure>元素上调用Photoswipe，但我对如何做到这一点感到有些失落。

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

var thumbElements = el.childNodes

......应该更具体。所以我需要这样的工作：

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

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

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

所以我在这里迷失了一点......我很感激任何帮助。

Answer 1

好的，终于让它自己工作了。对于任何可能遇到这种情况的人来说，这里有一个更好的解释我需要工作的东西（我在这里的初始问题中有点模糊），以及我是如何让它工作的。

在文档中，Photoswipe提供了有关如何在图库中实现它的建议，请参阅{{3>}上的如何从链接列表构建幻灯片数组部分这个实现假设的是，你的画廊就是这样：只是一组图像。但是，我在所有博客文章中都使用了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不会应用于所有元素节点，而只应用于更具体为FIG元素类型的子节点：）

在混合内容博客帖子中调用Photoswipe

1 个答案: