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:

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>
    )
  }
}

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:

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>
    )
  }
}

• javascript
• reactjs
• react-redux

• 1 Reading the official docs I understood that renderCustomControls allows you to render a custom ponent. Inside this custom ponent is where you should create a zoom-in zoom-out ponent, but that functionality is not provided by this pkg. You should take a look at this examples: react-medium-image-zoom or react-image-zoom. – Facundo La Rocca Commented Feb 21, 2017 at 12:47

2 Answers 2

Looks like there is no zooming ability in the ponent 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 ponent.

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

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

The mand 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.