<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>点击查看大图插件</title>
    <th:block th:fragment="css">
        <link rel="stylesheet" href="../../../vendor/photoswipe/dist/photoswipe.css" th:href="@{/vendor/photoswipe/dist/photoswipe.css}">
        <link rel="stylesheet" href="../../../vendor/photoswipe/dist/default-skin/default-skin.css" th:href="@{/vendor/photoswipe/dist/default-skin/default-skin.css}">
    </th:block>
    <th:block th:fragment="js">
        <script src="../../../vendor/photoswipe/dist/photoswipe.min.js" th:src="@{/vendor/photoswipe/dist/photoswipe.min.js}"></script>
        <script src="../../../vendor/photoswipe/dist/photoswipe-ui-default.min.js" th:src="@{/vendor/photoswipe/dist/photoswipe-ui-default.min.js}"></script>
    </th:block>
</head>
<body>
<th:block th:fragment="html">
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
    <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&#45;&#45;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 https://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>
    <script>
        var initPhotoSwipeFromDOM = function(gallerySelector) {
            var onClick = function(e) {
                e = e || window.event;
                e.preventDefault ? e.preventDefault() : e.returnValue = false;

                var eTarget = e.target || e.srcElement;
                var index = eTarget.getAttribute('data-index');
                if(index >= 0) {
                    // open PhotoSwipe if valid index found
                    openPhotoSwipe( parseInt(index, 10), gallerySelector );
                }
                return false;
            };

            var parseElements = function (el) {
                var numNodes = el.length,
                    items = [],
                    imgEl,
                    item;

                for (var i = 0; i < numNodes; i++) {
                    imgEl = el[i]; // <img> element
                    // create slide object
                    // 图片宽高未知，先设置为 0，下面有代码会重新获取图片宽高。
                    item = {
                        src: imgEl.src,
                        w: 0,
                        h: 0
                    };
                    items.push(item);
                }
                return items;
            };

            var openPhotoSwipe = function (index, galleryElement, disableAnimation) {
                var pswpElement = document.querySelectorAll('.pswp')[0],
                    options = {index: index},
                    items = parseElements(document.querySelectorAll( gallerySelector )),
                    gallery;
                if (disableAnimation) options.showAnimationDuration = 0;
                gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                // 获取图片宽高 https://github.com/dimsemenov/PhotoSwipe/issues/796
                gallery.listen('gettingData', function (index, item) {
                    if (item.w < 1 || item.h < 1) { // unknown size
                        var img = new Image();
                        img.onload = function () { // will get size after load
                            item.w = this.width; // set image width
                            item.h = this.height; // set image height
                            gallery.invalidateCurrItems(); // reinit Items
                            gallery.updateSize(true); // reinit Items
                        };
                        img.src = item.src; // let's download image
                    }
                });
                gallery.init();
            };

            var galleryElements = document.querySelectorAll( gallerySelector );
            for(var i = 0, l = galleryElements.length; i < l; i++) {
                galleryElements[i].setAttribute('data-index', i);
                galleryElements[i].onclick = onClick;
                galleryElements[i].style.cursor= 'pointer';
            }
        };
    </script>
</th:block>
</body>
</html>