首页 技术文章 javascript

PhotoSwipe5.4.3完整示例

发布日期: 2024-03-17
FontSize: 【小 中 大】
PhotoSwipe5.4.3完整示例

版本号：5.4.3

https://photoswipe.com

功能：点击图片弹出全屏预览，多图可以左右滑动来切换，类似于wx.previewImage以及mui.previewimage

个人感受：不如wx.previewImage、mui.previewimage好用，例如：如果有多组图片，需要分组显示，似乎不太方便。可能是还不太会用，但效果不错。

PhotoSwipe在线示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PhotoSwipe Example</title>
<link rel="stylesheet" href="https://z.lichil.com/vendor/PhotoSwipe/src/photoswipe.css">
<style>
img {
	height: 200px;
}
</style>
</head>
<body>
<div class="pswp-example" id="gallery--test-wheelToZoom">
	<div class="pswp-example__preview docs-styled-scrollbar" role="region" aria-label="Code preview">
		<div class="pswp-gallery" id="gallery--test-pinch-to-close"> 
			<a class="a"  href="https://z.lichil.com/upload/images/demo/63e3ca02f3cc463a976912ea60e528cfnoop.webp"  data-pswp-uid="1" data-pswp-width="" data-pswp-height="" target="_blank"> <img src="https://z.lichil.com/upload/images/demo/63e3ca02f3cc463a976912ea60e528cfnoop.webp" alt=""> </a>
			<a class="a" href="https://z.lichil.com/upload/images/test/e4228138ae094be0bf8a0d2413b0af87noop.webp"  data-pswp-uid="1" data-pswp-width="" data-pswp-height="" > <img src="https://z.lichil.com/upload/images/test/e4228138ae094be0bf8a0d2413b0af87noop.webp" alt=""> </a> 
			<a class="a"  href="https://z.lichil.com/upload/images/demo/angelbaby1Z313115A6.webp"  data-pswp-uid="2" data-pswp-width="" data-pswp-height="" target="_blank"> <img src="https://z.lichil.com/upload/images/demo/angelbaby1Z313115A6.webp" alt=""> </a> 
			<a class="a"  href="https://z.lichil.com/upload/images/demo/angelbaby1ZP6113523.webp"  data-pswp-uid="2" data-pswp-width="" data-pswp-height="" target="_blank"> <img src="https://z.lichil.com/upload/images/demo/angelbaby1ZP6113523.webp" alt=""> </a> 
		</div>
	</div>
</div>
<script type="text/javascript" src="https://z.lichil.com/views/index/js/jquery-1.9.1.min.js"></script> 
<script type="module">
	var links = document.querySelectorAll('.pswp-gallery a');
	links.forEach(function (link) {
		var image = new Image();
		image.src = link.getAttribute('href');

		image.onload = function () {
			var width = this.width;
			var height = this.height;

			link.setAttribute('data-pswp-width', width);
			link.setAttribute('data-pswp-height', height);
		};
	});

	import PhotoSwipeLightbox from '../vendor/PhotoSwipe/dist/photoswipe-lightbox.esm.js';
	const lightbox = new PhotoSwipeLightbox({
	  gallery: 'body',
	  children: 'a',
	  pswpModule: () => import('../vendor/PhotoSwipe/dist/photoswipe.esm.js'),
	  wheelToZoom: true
	});
	lightbox.init();
</script>
</body>
</html>

自定义优化PhotoSwipe

为什么会有下面这一段：

    var links = document.querySelectorAll('.pswp-gallery a');
	links.forEach(function (link) {
		var image = new Image();
		image.src = link.getAttribute('href');

		image.onload = function () {
			var width = this.width;
			var height = this.height;

			link.setAttribute('data-pswp-width', width);
			link.setAttribute('data-pswp-height', height);
		};
	});

因为原示例的代码是带宽度与高度：

  <a href="https://z.lichil.com/upload/images/test/355e251b1a9742119b103f990228ff00noop.webp" 
    data-pswp-width="1178" 
    data-pswp-height="662" 
    target="_blank">
    <img src="https://z.lichil.com/upload/images/test/355e251b1a9742119b103f990228ff00noop.webp" alt="" />
  </a>

其中，data-pswp-width="1178"，data-pswp-height="662" ，而这两个参数是不可缺少的，否则图片会变形，显得不那么美观，所以使用js获取了图片的宽度与高度，填充了这两个参数。

gallery: 'body'，可以限制某个元素下的图片，这里的body指的是body里面的所有图片。

children: 'a'，指的是body下的a标签，可以修改成children: '.a'，指元素里class为a的元素。

请注意文件路径：vendor/PhotoSwipe-master/dist/photoswipe-lightbox.esm.js

官网地址：https://photoswipe.com

代码下载：https://github.com/dimsemenov/PhotoSwipe/archive/refs/heads/master.zip

javascript