PhotoSwipe适用于移动设备和桌面的JavaScript图像库

PhotoSwipe v5 - JavaScript 图像库

示例 | 文档

v5 中的新功能

ES6 代码质量和重写

该脚本现在以 ES 模块形式分发，无需构建步骤即可使用。文档也已更新，包含更多示例。

更简单的初始化和动态导入

支持 PhotoSwipe 现在支持动态导入，并且不会阻塞页面渲染。

<script type="module">
import Lightbox from './photoswipe-lightbox.esm.js';
const lightbox = new Lightbox({
  gallery: '#my-gallery',
  children: 'a',
  pswpModule: () => import('./photoswipe.esm.js')
});
lightbox.init();
</script>

动画和手势引擎更新

大多数动画的性能均有所提升，触摸手势现在应该更加流畅。初始打开或关闭过渡可以从 CSS 裁剪的缩略图运行，如本页面顶部所示。

单个 CSS 文件，无需外部资源

使用 CSS 变量，默认图标动态生成且尺寸极小。

内置响应式图片支持

PhotoSwipe 还可以在用户通过 srcset 缩放时动态加载更大的图片。

在缩放状态下打开图片

现在更容易控制缩放级别，请参阅文档中的“调整缩放级别”部分了解更多信息。以下示例分别打开了缩放状态下的图片。

插件

动态字幕插件

该插件可根据可用空间动态地将字幕置于下方或旁边。

Tiled Deep Zoom 插件（实验性）

基于图块的图像查看器，允许显示超大图像。与传统的图块查看器（例如 Leaflet 或 OpenSeaDragon）不同，它仅在用户缩放到主图像范围之外时才显示图块，并保留所有默认的 PhotoSwipe 幻灯片间导航。

许可证

PhotoSwipe 可免费用于个人或商业项目（MIT 许可证）。