При использовании 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 в функцию, чтобы она смотрела за этими элементами для фигуры и потомков.

Абсолютно новый для чистого JS, любые советы или дальнейшее чтение очень приветствуются. К сожалению, с этим я понятия не имею, где даже начать искать.

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