在 ReactJS 中创建具有放大和缩小功能的图像灯箱

在 Web 应用程序中，图像灯箱是一个常见的元素。它允许用户轻松地浏览和查看大量图像。在本文中，我们将介绍如何在 ReactJS 中创建一个具有放大和缩小功能的图像灯箱。

安装并导入必要的库

为了创建图像灯箱，我们将使用以下库：

• ReactJS
• React Modal
• React Image Magnify

我们需要将它们安装并导入我们的项目中。

npm install react react-modal react-image-magnify --save

import React from 'react';
import Modal from 'react-modal';
import { Magnifier } from 'react-image-magnify';

// 导入你的图像
import image from 'your-image-path.jpg';

const customStyles = {
  overlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.75)'
  },
  content: {
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    backgroundColor: 'transparent',
    border: 'none'
  }
};

Modal.setAppElement('#root');

class ImageLightbox extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isModalOpen: false
    };
  }

  openModal = () => {
    this.setState({ isModalOpen: true });
  };

  closeModal = () => {
    this.setState({ isModalOpen: false });
  };

  render() {
    return (
      <div>
        <img src={image} onClick={this.openModal} />

        <Modal
          isOpen={this.state.isModalOpen}
          onRequestClose={this.closeModal}
          contentLabel='Image Modal'
          style={customStyles}
        >
          <button onClick={this.closeModal}>Close Modal</button>
          <Magnifier src={image} />
        </Modal>
      </div>
    );
  }
}

export default ImageLightbox;

创建一个基本的图像灯箱

首先，我们将创建一个基本的图像灯箱，该灯箱仅包含图像和一个打开按钮。当用户单击按钮时，它将显示放大器。

class ImageLightbox extends React.Component {
  render() {
    return (
      <div>
        <img src={image} />
        <button>Open Modal</button>
      </div>
    );
  }
}

为了使按钮起作用，我们需要添加一些状态来控制模态框的显示。我们还必须导入 React Modal 并设置应用程序元素。

Modal.setAppElement('#root');

接下来，我们将添加一个状态变量以控制模态框的显示。

class ImageLightbox extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isModalOpen: false
    };
  }

  render() {
    return (
      <div>
        <img src={image} onClick={() => this.setState({ isModalOpen: true })} />
        <button onClick={() => this.setState({ isModalOpen: true })}>Open Modal</button>

        <Modal isOpen={this.state.isModalOpen}>
          <button onClick={() => this.setState({ isModalOpen: false })}>Close Modal</button>
          <img src={image} />
        </Modal>
      </div>
    );
  }
}

现在，我们已经将展示图像的元素添加到模态框中。当用户单击按钮时，模态框会弹出并显示图像。现在我们将添加一个放大镜并允许用户放大和缩小图像。

添加一个放大镜

要在 ReactJS 中添加一个放大镜，我们将使用 react-image-magnify 库。该库提供了一个 Magnifier 组件，允许您以交互方式缩放图片。要使用它，我们需要将组件导入我们的模块中。

import { Magnifier } from 'react-image-magnify';

在模态框中添加放大器。

class ImageLightbox extends React.Component {
  render() {
    return (
      <div>
        <img src={image} onClick={() => this.setState({ isModalOpen: true })} />
        <button onClick={() => this.setState({ isModalOpen: true })}>Open Modal</button>

        <Modal isOpen={this.state.isModalOpen}>
          <button onClick={() => this.setState({ isModalOpen: false })}>Close Modal</button>
          <Magnifier src={image} />
        </Modal>
      </div>
    );
  }
}

现在我们可以在模态框中看到交互式放大器。用户可以使用鼠标滚轮或手势缩放图像。但是，为了使其适应我们的应用程序，我们需要一些自定义样式。

添加自定义样式

让我们先开始调整外部样式。我们想要将模态框设置为透明。我们还需要通过设置边框样式、边框宽度和边框颜色来取消放大器的外框。在我们的 CSS 文件中，我们可以添加以下类。

.react-modal__overlay {
  background-color: rgba(0, 0, 0, 0.75);
}

.react-modal__content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: none;
}

.react-image-magnify-container {
  border: none;
}

.react-image-magnify-lens {
  box-shadow: none;
  border: none;
}

现在我们可以在应用程序中看到一个更专业的图像灯箱，它允许用户浏览和缩放大量图像。

总结

在本文中，我们介绍了如何使用 React Modal 和 React Image Magnify 库创建具有放大和缩小功能的图像灯箱。它允许用户轻松地浏览和查看大量图像。我们还学习了如何自定义样式，以使组件预期的外观和感觉符合应用程序的设计。希望这篇文章能够帮助你创建你自己的酷炫图像灯箱！