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>
)
}
}
Share
Improve this question
asked Feb 21, 2017 at 12:30
Arslan TariqArslan Tariq
2,5382 gold badges25 silver badges48 bronze badges
1
-
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
orreact-image-zoom
. – Facundo La Rocca Commented Feb 21, 2017 at 12:47
2 Answers
Reset to default 1Looks 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.