@reuse-sh / lightbox

一种图像查看器，可以从缩略图（包括裁剪过的缩略图）打开，并在关闭时返回到缩略图。页面可以通过浏览器滚动和滑动，图像可以通过缩放、平移、双击和指针缩放。

原则

这些是代码遵守的规则。对任何框架的适应也会保留它们。

• 带有原生滚动条的页面。 页面是旋转盘上的滚动夹条，因此触摸和触控板可以保持系统的动力。
• 从缩略图打开并返回到它。 图像从其裁剪的预览中生长出来，并在接近时回到相同的位置。
• 只装近处的东西。 只加载当前和邻近的图像，并跳过中间的页面。
• 缩放你触摸的点。 缩放，滚轮和双击围绕指针或手指缩放，平移停止在图像的边缘。
• 把注意力集中在内心，然后再放回来。 查看器是一个原生模态对话框，关闭它会将焦点返回到打开它的元素。
• 让这一页保持原样。 Destroy恢复页面滚动，隐藏的缩略图，以及查看者触摸的每个样式和监听器。

安装

npm install @reuse-sh/lightbox

浏览器

import { createLightbox } from "@reuse-sh/lightbox";
import "@reuse-sh/lightbox/styles.css";

const viewer = createLightbox({ thumbnails: true });
viewer.open([{
  src: "/photo.jpg",
  alt: "A mountain lake",
  width: 1600,
  height: 1200,
  origin: document.querySelector("img"),
}]);

反应

import { useLightbox } from "@reuse-sh/lightbox/react";
import "@reuse-sh/lightbox/styles.css";

function Gallery({ images }) {
  const viewer = useLightbox();
  return <button onClick={() => viewer.open(images)}>
    Open gallery
  </button>;
}

文档

• 示例和API： https://reuse.sh/lightbox
• 编码代理指南： https://reuse.sh/lightbox/guide.md

许可证

麻省理工学院