React Image Lightbox

时向文
2023-12-01

React Image Lightbox

基于 React 的图片预览组件(支持选择上一张下一张,支持放大缩小等操作)

A flexible lightbox component for displaying images in a React project.

Features

  • Keyboard shortcuts (with rate limiting)
  • Image Zoom
  • Flexible rendering using src values assigned on the fly
  • Image preloading for smoother viewing
  • Mobile friendly, with pinch to zoom and swipe
  • No external CSS

Example

import React, { Component } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app

// 这里是不同图片的SRC数组
const images = [
  '//placekitten.com/1500/500',
  '//placekitten.com/4000/3000',
  '//placekitten.com/800/1200',
  '//placekitten.com/1500/1500',
];

export default class LightboxExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      photoIndex: 0,
      isOpen: false,
    };
  }

  render() {
    const { photoIndex, isOpen } = this.state;
    return (
      <div>
        <button type="button" onClick={() => this.setState({ isOpen: true })}>
          Open Lightbox
        </button>
        {isOpen && (
          <Lightbox
            mainSrc={images[photoIndex]}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length,
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length,
              })
            }
          />
        )}
      </div>
    );
  }
}

Options

PropertyTypeDescription
mainSrc (required)stringMain display image url
prevSrcstringPrevious display image url (displayed to the left). If left undefined, onMovePrevRequest will not be called, and the button not displayed
nextSrcstringNext display image url (displayed to the right). If left undefined, onMoveNextRequest will not be called, and the button not displayed
mainSrcThumbnailstringThumbnail image url corresponding to props.mainSrc. Displayed as a placeholder while the full-sized image loads.
prevSrcThumbnailstringThumbnail image url corresponding to props.prevSrc. Displayed as a placeholder while the full-sized image loads.
nextSrcThumbnailstringThumbnail image url corresponding to props.nextSrc. Displayed as a placeholder while the full-sized image loads.
onCloseRequest (required)funcClose window event. Should change the parent state such that the lightbox is not rendered
onMovePrevRequestfuncMove to previous image event. Should change the parent state such that props.prevSrc becomes props.mainSrc, props.mainSrc becomes props.nextSrc, etc.
onMoveNextRequestfuncMove to next image event. Should change the parent state such that props.nextSrc becomes props.mainSrc, props.mainSrc becomes props.prevSrc, etc.
onImageLoadfuncCalled when an image loads.(imageSrc: string, srcType: string, image: object): void
onImageLoadErrorfuncCalled when an image fails to load.(imageSrc: string, srcType: string, errorEvent: object): void
imageLoadErrorMessagenodeWhat is rendered in place of an image if it fails to load. Centered in the lightbox viewport. Defaults to the string "This image failed to load".
onAfterOpenfuncCalled after the modal has rendered.
discourageDownloadsboolWhen true, enables download discouragement (preventing [right-click -> Save Image As...]). Defaults to false.
animationDisabledboolWhen true, image sliding animations are disabled. Defaults to false.
animationOnKeyInputboolWhen true, sliding animations are enabled on actions performed with keyboard shortcuts. Defaults to false.
animationDurationnumberAnimation duration (ms). Defaults to 300.
keyRepeatLimitnumberRequired interval of time (ms) between key actions (prevents excessively fast navigation of images). Defaults to 180.
keyRepeatKeyupBonusnumberAmount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images). Defaults to 40.
imageTitlenodeImage title (Descriptive element above image)
imageCaptionnodeImage caption (Descriptive element below image)
imageCrossOriginstringcrossorigin attribute to append to img elements (MDN documentation)
toolbarButtonsnode[]Array of custom toolbar buttons
reactModalStyleObjectSet z-index style, etc., for the parent react-modal (react-modal style format)
reactModalPropsObjectOverride props set on react-modal (https://github.com/reactjs/react-modal)
imagePaddingnumberPadding (px) between the edge of the window and the lightbox. Defaults to 10.
clickOutsideToCloseboolWhen true, clicks outside of the image close the lightbox. Defaults to true.
enableZoomboolSet to false to disable zoom functionality and hide zoom buttons. Defaults to true.
wrapperClassNamestringClass name which will be applied to root element after React Modal
nextLabelstringaria-label set on the 'Next' button. Defaults to 'Next image'.
prevLabelstringaria-label set on the 'Previous' button. Defaults to 'Previous image'.
zoomInLabelstringaria-label set on the 'Zoom In' button. Defaults to 'Zoom in'.
zoomOutLabelstringaria-label set on the 'Zoom Out' button. Defaults to 'Zoom out'.
closeLabelstringaria-label set on the 'Close Lightbox' button. Defaults to 'Close lightbox'.
 类似资料:

相关阅读

相关文章

相关问答