javascript - PhotoSwipe:编辑 parseThumbnailElements 函数以解析附加标记元素

Question

使用 PhotoSwipe 缩略图库标记如下所示:

    <div class="wrap clearfix">
    <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
    <ul class="gallery-grid">
        <li>
            <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                <a href="img/dektop/1.jpg" itemprop="contentUrl" data-size="1200x1200">
                    <img src="img/thumb/1.jpg" itemprop="thumbnail" alt="Image description" />
                </a>
                    <figcaption itemprop="caption description">Image caption 1</figcaption>
            </figure>
        </li>
        <li>
            <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                <a href="img/dektop/2.jpg" itemprop="contentUrl" data-size="1200x1200">
                    <img src="img/thumb/2.jpg" itemprop="thumbnail" alt="Image description" />
                </a>
                    <figcaption itemprop="caption description">Image caption 2</figcaption>
            </figure>
        </li>
    </ul>
</div> <!-- mygallery -->
</div> <!-- wrap -->

解析图片的函数是:

var parseThumbnailElements = function(el) {
    var thumbElements = el.childNodes,
        numNodes = thumbElements.length,
        items = [],
        figureEl,
        linkEl,
        size,
        item;

    for(var i = 0; i < numNodes; i++) {

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

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

        linkEl = figureEl.children[0]; // <a> element

        size = linkEl.getAttribute('data-size').split('x');

        // create slide object
        item = {
            src: linkEl.getAttribute('href'),
            w: parseInt(size[0], 10),
            h: parseInt(size[1], 10)
        };



        if(figureEl.children.length > 1) {
            // <figcaption> content
            item.title = figureEl.children[1].innerHTML; 
        }

        if(linkEl.children.length > 0) {
            // <img> thumbnail element, retrieving thumbnail url
            item.msrc = linkEl.children[0].getAttribute('src');
        } 

        item.el = figureEl; // save link to element for getThumbBoundsFn
        items.push(item);
    }

    return items;
};

我在 my-gallery 和 figure 类之间有两个额外的元素。删除这些东西效果很好，但是对于额外的两个类，我无法选择上一个或下一个项目，这意味着数组已损坏。

我怎样才能在函数中包含 gallery-grid 和 li 元素，这样它就可以超越 figure 和 children 的那些元素。

对纯 JS 完全陌生，非常欢迎任何提示或进一步阅读。不幸的是，对于这个，我什至不知道从哪里开始寻找。

http://quirksmode.org/dom/core/#gettingelements https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

Answer 1

我通过保留原始标记并更改缩略图库的 CSS 来进行管理。它现在可以工作了，看起来像这样:

<div class="wrap clearfix">
    <div class="my-gallery gallery-grid" itemscope itemtype="http://schema.org/ImageGallery">
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="img/dektop/1.jpg" itemprop="contentUrl" data-size="1200x1200">
                <img src="img/thumb/1.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
                <figcaption itemprop="caption description">Image caption 4</figcaption>
        </figure>
        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="img/dektop/2.jpg" itemprop="contentUrl" data-size="1200x1200">
                <img src="img/thumb/2.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
                <figcaption itemprop="caption description">Image caption 4</figcaption>
        </figure>
    </div> <!-- mygallery -->
</div> <!-- wrap -->

缩略图网格的 CSS:

/* thumnail gallery grid */
.gallery-grid {
    margin: 35px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
}

.gallery-grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    width: 16.6666667%; /* Fallback */
    width: -webkit-calc(100% / 6);
    width: calc(100% / 6);
    height: 300px; /* pay attention to this later */
}

.gallery-grid figure a,
.gallery-grid figure a img {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.gallery-grid figure a img {
    width: 100%;
    height: auto;    
}



@media screen and (max-width: 1190px) {
    .gallery-grid figure {
        width: 20%; /* Fallback */
        width: -webkit-calc(100% / 5);
        width: calc(100% / 5);
    }
}

@media screen and (max-width: 945px) {
    .gallery-grid figure {
        width: 25%; /* Fallback */
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 660px) {
    .gallery-grid figure {
        width: 33.3333333%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 660px) {
    .gallery-grid figure {
        width: 33.3333333%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 400px) {
    .gallery-grid figure {
        width: 50%; /* Fallback */
        width: -webkit-calc(100% / 2);
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 300px) {
    .gallery-grid figure {
        width: 100%;
    }
}

然而，这并不是真正的答案，而是适应原始标记的解决方法。我仍然非常想了解如何更改 JS 以使用我的问题中的标记。

我正在使用这里的示例: http://photoswipe.com/documentation/getting-started.html在底部有一个 CodePen .