Настрока плагина photoswipe

var initPhotoSwipeFromDOM = function(gallerySelector) { 
 
    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; 
    }; 
 
    // find nearest parent element 
    var closest = function closest(el, fn) { 
        return el && ( fn(el) ? el : closest(el.parentNode, fn) ); 
    }; 
 
    // triggers when user clicks on thumbnail 
    var onThumbnailsClick = function(e) { 
        e = e || window.event; 
        e.preventDefault ? e.preventDefault() : e.returnValue = false; 
 
        var eTarget = e.target || e.srcElement; 
 
        // find root element of slide 
        var clickedListItem = closest(eTarget, function(el) { 
            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE'); 
        }); 
 
        if(!clickedListItem) { 
            return; 
        } 
 
        // find index of clicked item by looping through all child nodes 
        // alternatively, you may define index via data- attribute 
        var clickedGallery = clickedListItem.parentNode, 
            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) { 
            // open PhotoSwipe if valid index found 
            openPhotoSwipe( index, clickedGallery ); 
        } 
        return false; 
    }; 
 
    // parse picture index and gallery index from URL (#&pid=1&gid=2) 
    var photoswipeParseHash = function() { 
        var hash = window.location.hash.substring(1), 
            params = {}; 
 
        if(hash.length < 5) { 
            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 = { 
 
            // define gallery index (for URL) 
            galleryUID: galleryElement.getAttribute('data-pswp-uid'), 
 
            getThumbBoundsFn: function(index) { 
                // See Options -> getThumbBoundsFn section of documentation for more info 
                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail 
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop, 
                    rect = thumbnail.getBoundingClientRect(); 
 
                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; 
            } 
 
        }; 
 
        // PhotoSwipe opened from URL 
        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 { 
                // in URL indexes start from 1 
                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); 
        gallery.init(); 
    }; 
 
    // loop through all gallery elements and bind events 
    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('.about-certificate__list');

.about-certificate { 
  margin-left: rem(100); 
  margin-right: rem(200); 
  margin-bottom: rem(100); 
 } 
 
.about-certificate__wrapper { 
  max-width: rem(1200); 
} 
 
.about-certificate__head { 
  font-size: rem(52); 
  line-height: rem(56); 
  color: #000; 
  font-weight: 200; 
  margin-bottom: rem(40); 
} 
 
.about-certificate__list { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  height: rem(820); 
  overflow: hidden; 
  transition: height .3s ease; 
  margin-bottom: rem(30); 
} 
 
.about-certificate__item { 
  //margin-bottom: rem(50); 
  height: rem(430); 
  flex-basis: 25%; 
  max-width: 25%; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  padding-left: rem(45); 
  padding-right: rem(45); 
  transition: 0.3s; 
  list-style: none; 
} 
   
.about-certificate--hidden { 
  opacity: 0; 
  pointer-events: none; 
} 
 
.about-certificate__image-container { 
  cursor: pointer; 
  position: relative; 
 
  img { 
    position: relative; 
    display: block; 
    max-width: rem(190); 
    border: 1px solid #E5E5E5; 
  } 
} 
     
.about-certificate__signature { 
  padding-top: rem(20); 
  text-align: center; 
  font-size: rem(15); 
  line-height: rem(20); 
  color: #000000; 
  font-weight: 500; 
}

<div class="about-certificate"> 
            <div class="about-certificate__wrapper"> 
                <div class="about-certificate__head second-title">custom head</div> 
                <ul class="about-certificate__list"> 
                    <li class="about-certificate__item"> 
                            <a href="https://picsum.photos/360/550" data-size="360x550" class="about-certificate__image-container"> 
                                <img src="https://picsum.photos/180/275"> 
                                <div class="about-certificate__image-mask"></div> 
                                <div class="about-certificate__image-zoom"></div> 
                            </a> 
                        <div class="about-certificate__signature">test signature 1-12139--23123</div> 
                    </li> 
                    <li class="about-certificate__item"> 
                            <a href="https://picsum.photos/360/550" data-size="360x550" class="about-certificate__image-container"> 
                                <img src="https://picsum.photos/180/275"> 
                                <div class="about-certificate__image-mask"></div> 
                                <div class="about-certificate__image-zoom"></div> 
                            </a> 
                        <div class="about-certificate__signature">test</div> 
                    </li> 
                    <li class="about-certificate__item"> 
                            <a href="https://picsum.photos/360/550" data-size="360x550" class="about-certificate__image-container"> 
                                <img src="https://picsum.photos/180/275"> 
                                <div class="about-certificate__image-mask"></div> 
                                <div class="about-certificate__image-zoom"></div> 
                            </a> 
                        <div class="about-certificate__signature">test signature 1-12139--23123</div> 
                    </li> 
                    <li class="about-certificate__item"> 
                            <a href="https://picsum.photos/360/550" data-size="360x550" class="about-certificate__image-container"> 
                                <img src="https://picsum.photos/180/275"> 
                                <div class="about-certificate__image-mask"></div> 
                                <div class="about-certificate__image-zoom"></div> 
                            </a> 
                        <div class="about-certificate__signature">test</div> 
                    </li> 
                    <li class="about-certificate__item"> 
                            <a href="../images/about/cert-pic1-big.png" data-size="360x550" class="about-certificate__image-container"> 
                                <img src="https://picsum.photos/180/275"> 
                                <div class="about-certificate__image-mask"></div> 
                                <div class="about-certificate__image-zoom"></div> 
                            </a> 
                        <div class="about-certificate__signature">test signature 1-12139--23123</div> 
                    </li> 
                    <li class="about-certificate__item"> 
                            <a href="https://picsum.photos/360/550" data-size="360x550" class="about-certificate__image-container"> 
                                <img src="https://picsum.photos/180/275"> 
                                <div class="about-certificate__image-mask"></div> 
                                <div class="about-certificate__image-zoom"></div> 
                            </a> 
                        <div class="about-certificate__signature">test</div> 
                    </li> 
                    <li class="about-certificate__item"> 
                            <a href="https://picsum.photos/360/550" data-size="360x550" class="about-certificate__image-container"> 
                                <img src="https://picsum.photos/180/275"> 
                                <div class="about-certificate__image-mask"></div> 
                                <div class="about-certificate__image-zoom"></div> 
                            </a> 
                        <div class="about-certificate__signature">test signature 1-12139--23123</div> 
                    </li> 
                    <li class="about-certificate__item"> 
                            <a href="https://picsum.photos/360/550" data-size="360x550" class="about-certificate__image-container"> 
                                <img src="https://picsum.photos/180/275"> 
                                <div class="about-certificate__image-mask"></div> 
                                <div class="about-certificate__image-zoom"></div> 
                            </a> 
                        <div class="about-certificate__signature">test</div> 
                    </li> 
                  </ul> 
  
            </div> 
        </div> 
         
         
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 
 
            <!-- Background of PhotoSwipe. 
                 It's a separate element as animating opacity is faster than rgba(). --> 
            <div class="pswp__bg"></div> 
 
            <!-- Slides wrapper with overflow:hidden. --> 
            <div class="pswp__scroll-wrap"> 
 
                <!-- Container that holds slides. 
                    PhotoSwipe keeps only 3 of them in the DOM to save memory. 
                    Don't modify these 3 pswp__item elements, data is added later on. --> 
                <div class="pswp__container"> 
                    <div class="pswp__item"></div> 
                    <div class="pswp__item"></div> 
                    <div class="pswp__item"></div> 
                </div> 
 
                <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> 
                <div class="pswp__ui pswp__ui--hidden"> 
 
                    <div class="pswp__top-bar"> 
 
                        <!--  Controls are self-explanatory. Order can be changed. --> 
 
                        <div class="pswp__counter"></div> 
 
                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 
 
                        <button class="pswp__button pswp__button--share" title="Share"></button> 
 
                        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 
 
                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 
 
                        <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> 
                        <!-- element will get class pswp__preloader--active when preloader is running --> 
                        <div class="pswp__preloader"> 
                            <div class="pswp__preloader__icn"> 
                                <div class="pswp__preloader__cut"> 
                                    <div class="pswp__preloader__donut"></div> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
 
                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 
                        <div class="pswp__share-tooltip"></div> 
                    </div> 
 
                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> 
                    </button> 
 
                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> 
                    </button> 
 
                    <div class="pswp__caption"> 
                        <div class="pswp__caption__center"></div> 
                    </div> 
 
                </div> 
 
            </div> 
 
        </div>