如何创建 ReactJS 可缩放图像灯箱
How to create a ReactJS zoomable image lightbox
我正在 ReactJs 中创建图片库。网上有很多例子，但我没有找到任何在桌面浏览器上完美响应并且完全移动友好的东西。
特别是在手机浏览器上打开图片时，我需要能够双击放大图片，拖动到底部时关闭图片
我已经尝试了我在网上找到的所有主要解决方案。
例如，我尝试了所有这些 https://reactjsexample.com/tag/lightbox/
还有更多。
我也尝试了不同的方法，例如 CSS 规则、视口规则、创建一个简单的可缩放 html div 等...但没有任何效果。
基本上，我要实现的是这样的：https://www.lucapetruzzi.com/gallery/1
感谢这个库的创建：https://photoswipe.com/ 不幸的是我不能在 React 中使用它。
（我还尝试了 react-photoswipe 和 react-photoswipe-2 库，但它似乎没有得到维护并且不能与新版本的 React 一起使用）
感谢您的帮助
所以对于之前的评论，我为你写了一个片段，检查here
主要步骤如下：
- 使用
npm install photoswipe 所以 不要 需要包含构建的 js 但 需要 将 css 包含在index.html（或者您可以在 App.css 中导入）
- 在js组件中编写标记
- 通过单击
button 或在 useEffect 中初始化
我正在 ReactJs 中创建图片库。网上有很多例子，但我没有找到任何在桌面浏览器上完美响应并且完全移动友好的东西。
特别是在手机浏览器上打开图片时，我需要能够双击放大图片，拖动到底部时关闭图片
我已经尝试了我在网上找到的所有主要解决方案。 例如，我尝试了所有这些 https://reactjsexample.com/tag/lightbox/ 还有更多。
我也尝试了不同的方法，例如 CSS 规则、视口规则、创建一个简单的可缩放 html div 等...但没有任何效果。
基本上，我要实现的是这样的：https://www.lucapetruzzi.com/gallery/1
感谢这个库的创建：https://photoswipe.com/ 不幸的是我不能在 React 中使用它。 （我还尝试了 react-photoswipe 和 react-photoswipe-2 库，但它似乎没有得到维护并且不能与新版本的 React 一起使用）
感谢您的帮助
所以对于之前的评论，我为你写了一个片段，检查here
主要步骤如下：
- 使用
npm install photoswipe所以 不要 需要包含构建的 js 但 需要 将 css 包含在index.html（或者您可以在App.css中导入） - 在js组件中编写标记
- 通过单击
button或在useEffect 中初始化