Не удается получить дочерний узел в обычном JavaScript для PhotoSwipe

Question

Я настраиваю плагин PhotoSwipe 4.1.1 в сочетании с jquery mobile 1.4.5 и jquery 2.1.4, чтобы открывать увеличенное изображение миниатюры на мобильном телефоне.

В приложении есть какой-то старый код, который, кажется, написан на обычном JavaScript и немного jQuery.

Где-то в коде должна быть проблема, кажется, что селектор не работает, так как он не может получить дочерние узлы. Я включаю всю функцию в конце этого вопроса.

Самые важные части:

HTML:

<div id="demo-test-gallery" class="demo-gallery">
<div id="cl_gallery">

  <a href="big.jpg" data-size="720x960" data-details="title" style="" class="ui-link">
    <img src="small.jpg"  width="120" height="80">
    <figure>test</figure>
  </a>

</div>
</div>

Как только я нажимаю на миниатюру, я получаю эту ошибку:

Невозможно прочитать свойство 'split' из null

Сведения об ошибке:

psw,psw-ui,psw-custom,v1.0.0.min.js:37 Uncaught TypeError: Cannot read property 'split' of null
    at parseThumbnailElements (psw,psw-ui,psw-custom,v1.0.0.min.js:37)
    at openPhotoSwipe (psw,psw-ui,psw-custom,v1.0.0.min.js:156)
    at HTMLDivElement.onThumbnailsClick (psw,psw-ui,psw-custom,v1.0.0.min.js:118)

строка:

37:  size = el.getAttribute('data-size').split('x');
156: items = parseThumbnailElements(galleryElement);
117: if(index >= 0) {
            openPhotoSwipe( index, clickedGallery );
     }

// объект nodelist из consol.log

NodeList(8) [div#cl_gallery_main, a.ui-link, a.ui-link, a.ui-link, a.ui-link, a.ui-link, a.ui-link, a.ui-link]
0: div#cl_gallery_main
1: a.ui-link
2: a.ui-link
3: a.ui-link
4: a.ui-link
5: a.ui-link
6: a.ui-link
7: a.ui-link
length: 8
__proto__: NodeList

// первый элемент большого пальца объекта из consol.log

1: a.ui-link
accessKey: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: href, 1: data-size, 2: data-details, 3: style, 4: class, href: href, data-size: data-size, data-details: data-details, style: style, class: class, …}
autocapitalize: ""
baseURI: "http://rex.watchgurus/omega/ala-kjdlkjshdl-kajsd-fkjh"
charset: ""
childElementCount: 2
childNodes: NodeList(2) [img, figure]
children: HTMLCollection(2) [img, figure]
classList: DOMTokenList ["ui-link", value: "ui-link"]
className: "ui-link"
clientHeight: 93
clientLeft: 0
clientTop: 0
clientWidth: 93
contentEditable: "inherit"
coords: ""
dataset: DOMStringMap {size: "900x1200", details: "Wiesbaden - 4.999 €"}
dir: ""
download: ""
draggable: true
firstChild: img
firstElementChild: img
hash: ""
hidden: false

Вся пользовательская функция:

// custom integration for PhotoSwipe Gallery
(function() {

    var initPhotoSwipeFromDOM = function(gallerySelector) {

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

            for(var i = 0; i < numNodes; i++) {
                el = thumbElements[i];

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

                childElements = el.children;

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

                // create slide object
                item = {
                    src: el.getAttribute('href'),
                    w: parseInt(size[0], 10),
                    h: parseInt(size[1], 10),
                    details: el.getAttribute('data-details')
                };
                item.el = el; // save link to element for getThumbBoundsFn

                if(childElements.length > 0) {
                  item.msrc = childElements[0].getAttribute('src'); // thumbnail url
                  if(childElements.length > 1) {
                      item.title = childElements[1].innerHTML; // caption (contents of figure)
                  }
                }


                var mediumSrc = el.getAttribute('data-med');
                if(mediumSrc) {
                    size = el.getAttribute('data-med-size').split('x');
                    // "medium-sized" image
                    item.m = {
                        src: mediumSrc,
                        w: parseInt(size[0], 10),
                        h: parseInt(size[1], 10)
                    };
                }
                // original image
                item.o = {
                    src: item.src,
                    w: item.w,
                    h: item.h
                };

                items.push(item);
            }

            return items;
        };

        // find nearest parent element
        var closest = function closest(el, fn) {
            return el && ( fn(el) ? el : closest(el.parentNode, fn) );
        };

        var onThumbnailsClick = function(e) {
            e = e || window.event;
            e.preventDefault ? e.preventDefault() : e.returnValue = false;

            var eTarget = e.target || e.srcElement;

            var clickedListItem = closest(eTarget, function(el) {
                return el.tagName === 'A';
            });

            if(!clickedListItem) {
                return;
            }

            var clickedGallery = clickedListItem.parentNode;

            var childNodes = clickedListItem.parentNode.childNodes,
                numChildNodes = childNodes.length,
                nodeIndex = 0,
                index;

            for (var i = 0; i < numChildNodes; i++) {
                if(childNodes[i].nodeType !== 1) { 
                    continue; 
                }

                if(childNodes[i] === clickedListItem) {
                    index = nodeIndex;
                    break;
                }
                nodeIndex++;
            }

            if(index >= 0) {
                openPhotoSwipe( index, clickedGallery );
            }
            return false;
        };

        var photoswipeParseHash = function() {
            var hash = window.location.hash.substring(1),
            params = {};

            if(hash.length < 5) { // pid=1
                return params;
            }

            var vars = hash.split('&');
            for (var i = 0; i < vars.length; i++) {
                if(!vars[i]) {
                    continue;
                }
                var pair = vars[i].split('=');  
                if(pair.length < 2) {
                    continue;
                }           
                params[pair[0]] = pair[1];
            }

            if(params.gid) {
                params.gid = parseInt(params.gid, 10);
            }

            return params;
        };

        var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
            var pswpElement = document.querySelectorAll('.pswp')[0],
                gallery,
                options,
                items;

            items = parseThumbnailElements(galleryElement);

            // define options (if needed)
            options = {

                galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                getThumbBoundsFn: function(index) {
                    // See Options->getThumbBoundsFn section of docs for more info
                    var thumbnail = items[index].el.children[0],
                        pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                        rect = thumbnail.getBoundingClientRect(); 

                    return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
                },

                addCaptionHTMLFn: function(item, captionEl, isFake) {
                    if(!item.title) {
                        captionEl.children[0].innerText = '';
                        return false;
                    }
                    captionEl.children[0].innerHTML = item.title +  '<br/><small>Standort: ' + item.details + '</small>';
                    return true;
                },

            };


            if(fromURL) {
                if(options.galleryPIDs) {
                    // parse real index when custom PIDs are used 
                    // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
                    for(var j = 0; j < items.length; j++) {
                        if(items[j].pid == index) {
                            options.index = j;
                            break;
                        }
                    }
                } else {
                    options.index = parseInt(index, 10) - 1;
                }
            } else {
                options.index = parseInt(index, 10);
            }

            // exit if index not found
            if( isNaN(options.index) ) {
                return;
            }


            if(disableAnimation) {
                options.showAnimationDuration = 0;
            }

            // Pass data to PhotoSwipe and initialize it
            gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

            // see: http://photoswipe.com/documentation/responsive-images.html
            var realViewportWidth,
                useLargeImages = false,
                firstResize = true,
                imageSrcWillChange;

            gallery.listen('beforeResize', function() {

                var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
                dpiRatio = Math.min(dpiRatio, 2.5);
                realViewportWidth = gallery.viewportSize.x * dpiRatio;


                if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
                    if(!useLargeImages) {
                        useLargeImages = true;
                        imageSrcWillChange = true;
                    }

                } else {
                    if(useLargeImages) {
                        useLargeImages = false;
                        imageSrcWillChange = true;
                    }
                }

                if(imageSrcWillChange && !firstResize) {
                    gallery.invalidateCurrItems();
                }

                if(firstResize) {
                    firstResize = false;
                }

                imageSrcWillChange = false;

            });

            gallery.listen('gettingData', function(index, item) {
                // if( useLargeImages ) {
                    item.src = item.o.src;
                    item.w = item.o.w;
                    item.h = item.o.h;
                // } else {
                //     item.src = item.m.src;
                //     item.w = item.m.w;
                //     item.h = item.m.h;
                // }
            });

            gallery.init();
        };

        // select all gallery elements
        var galleryElements = document.querySelectorAll( gallerySelector );
        for(var i = 0, l = galleryElements.length; i < l; i++) {
            galleryElements[i].setAttribute('data-pswp-uid', i+1);
            galleryElements[i].onclick = onThumbnailsClick;
        }

        // Parse URL and open gallery if it contains #&pid=3&gid=1
        var hashData = photoswipeParseHash();
        if(hashData.pid && hashData.gid) {
            openPhotoSwipe( hashData.pid,  galleryElements[ hashData.gid - 1 ], true, true );
        }
    };

    initPhotoSwipeFromDOM('#cl_gallery');

})();

Почему Photoswipe не может получить размер изображения? Он находится внутри элемента html.