如何创建一个 ReactJS 可缩放图像灯箱



我正在ReactJs中创建一个图像库。网上有很多例子,但我没有找到任何在桌面浏览器上完全响应并且完全适合移动设备的东西。

特别是,当在移动浏览器上打开图像时,我需要能够通过双击缩放照片,并在将其拖动到底部时关闭照片

我已经尝试了我在网上找到的所有主要解决方案。 例如,我尝试了所有这些 https://reactjsexample.com/tag/lightbox/等等。

我还尝试了不同的方法,如 CSS 规则、视口规则、创建一个简单的可缩放 htmldiv 等......但没有任何效果。

基本上,我要实现的正是这样的:https://www.lucapetruzzi.com/gallery/1

由于这个库而创建:不幸的是,https://photoswipe.com/我不能在 React 中使用。(我也尝试了 react-photowipe 和 react-photowipe-2 库,但它似乎没有维护并且不适用于新版本的 React)

感谢您的任何帮助

所以对于之前的评论,我为你写了一个片段,检查这里

以下是主要步骤:

  1. 使用npm install photoswipe所以不需要包含构建的 js,但需要在index.html中包含 css(或者您可以在App.css中导入)
  2. 在 JS 组件中编写标记
  3. 通过单击buttonuseEffect初始化它

相关内容

  • 没有找到相关文章