PhotoSwipe用法

Posted 2020-10-01 随缘梦中人

1、自动识别data-size问题，添加以下代码

gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                    gallery.listen(‘imageLoadComplete‘,
                    function (index, item) {
                        var linkEl = item.el.children[0];

                        if (!linkEl.getAttribute(‘data-size‘) || linkEl.getAttribute(‘data-size‘) == ‘auto‘) {
                            var img = new Image();
                            img.src = linkEl.getAttribute(‘href‘);

                            linkEl.setAttribute(‘data-size‘, img.naturalWidth + ‘x‘ + img.naturalHeight);
                            item.w = img.naturalWidth;
                            item.h = img.naturalHeight;
                            gallery.invalidateCurrItems();
                            gallery.updateSize(true);
                        }
                    });
                    gallery.init();

2、buttons不显示问题，没找到原因

　　通过排除法，可能是css的问题，解决办法是，使用cdn的css，但是我把css相关的文件从cdn中下载下来还是不行。不知道是怎么回事。

<link rel="stylesheet" href=‘https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.css‘>
<link rel="stylesheet" href=‘https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.css‘>