CODEWITHSUNDEEP
javascriptreactjsreact-redux
Arslan Tariq
Arslan Tariq

Reputation: 2528

Zoom in and out on image in React.js

I am using react-image-gallery to view images on a page. And now I need to implement a zoom-in and zoom-out feature on button click. I have given a thorough read to the documentation of react-image-gallery but I couldn't find anything helpful. There is a prop named renderCustomControls that I have used to display zoom functionality buttons at the top left corner as shown here: screenshot

But I have no idea how to make that work. Any kind of help will be appreciated. Here is some relevant code:

export class CVPreview extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      images: []
    }

    this.renderCustomControls = this.renderCustomControls.bind(this)
  }

  renderCustomControls() {
    return(
      <span>
        <FloatingActionButton mini={true} secondary={true}>
          <ContentAdd />
        </FloatingActionButton>
        <FloatingActionButton mini={true} secondary={true}>
          <ContentRemove />
        </FloatingActionButton>
      </span>
    )
  }

  render() {
    const { openCVPreviewModal, onRequestClose } = this.props

    return (
      <Dialog
        className="cv-preview"
        titleClassName="cv-preview-title"
        contentClassName="cv-preview-content"
        bodyClassName="cv-preview-body"
        modal={false}
        open={openCVPreviewModal}
        autoDetectWindowHeight={false}
        onRequestClose={onRequestClose}>
        <IconButton
          className='close-icon'
          onClick={onRequestClose}>
          <ClearIcon />
        </IconButton>
        {
          this.state.images.length > 0 &&
          <ImageGallery
            items={this.state.images}
            renderItem={this.renderItem}
            renderLeftNav={this.renderLeftNav}
            renderRightNav={this.renderRightNav}
            showThumbnails={false}
            showPlayButton={false}
            showBullets={true}
            showFullscreenButton={false}
            renderCustomControls={this.renderCustomControls}/>
        }
        {
          this.state.images.length === 0 &&
          <p className="no-images-msg">
            No preview images found.
          </p>
        }
      </Dialog>
    )
  }
}

Upvotes: 6

Views: 18139

Answers (2)

Urjit Shah
Urjit Shah

Reputation: 40

You have to use a react lightbox which is provided by npm.

The command for install: npm i react-image-lightbox

and then use in intialData and set it as true so your image will zoom on click event.

Upvotes: 0

Abdul Wasae
Abdul Wasae

Reputation: 3688

Looks like there is no zooming ability in the component itself. You will probably have to fiddle with the actual image object itself (scaling the image and reloading). Either that, or you will have to look for another more suitable component.

There are a number of react components available solely for zooming purposes. You could maybe make use of one such component along side react-image-gallery

Upvotes: 1

Related Questions