photoswipe.js使用
https://photoswipe.com/styling/
html直接调用
<!DOCTYPE html>
<html>
<head>
<title>Test Gallery</title>
</head>
<body>
<script src="./photoswipe.umd.min.js"></script>
<script src="./photoswipe-lightbox.umd.min.js"></script>
<link rel="stylesheet" href="photoswipe.css">
<div class="test-gallery">
<a class="aaa" href="https://dummyimage.com/1200x600/000/fff" data-pswp-width="1200" data-pswp-height="600">
<img src="https://dummyimage.com/120x60/000/fff" alt="" />
</a>
<a class="aaa" href="https://dummyimage.com/1200x1200/000/fff" data-pswp-width="1200" data-pswp-height="1200">
<img src="https://dummyimage.com/60x60/000/fff" alt="" />
</a>
<a class="aaa" href="https://dummyimage.com/600x1200/000/fff" data-pswp-width="600" data-pswp-height="1200">
<img src="https://dummyimage.com/30x60/000/fff" alt="" />
</a>
</div>
<script type="text/javascript">
var lightbox = new PhotoSwipeLightbox({
gallery: '.test-gallery', //区域class
children: '.aaa', //指定轮播对象class
//bgOpacity: 1, //背景透明度
//showHideAnimationType: 'zoom', //打开关闭过渡动画
pswpModule: PhotoSwipe
});
lightbox.init();
</script>
</body>
</html>