d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Inner Image Zoom Library For React

A React component for magnifying an image within its original container. Zoom behavior can be triggered on click or hover and the zoomed image can be moved by dragging on touch devices and either dragging or pan on hover on non-touch devices.

The component supports responsive images, loading placeholders, optional fullscreen zoom on mobile, and more.

How to use it:

1. Installation.

# Yarn
$ yarn add react-inner-image-zoom

# NPM
$ npm i react-inner-image-zoom

2. Import the inner image zoom component.

import InnerImageZoom from 'react-inner-image-zoom';
// stylesheet
import 'react-inner-image-zoom/lib/InnerImageZoom/styles.min.css';

3. Add the <InnerImageZoom /> component to the app and define the paths to the original & large images.

<InnerImageZoom 
  src="https://reactscript.com/path/to/original.jpg" 
  zoomSrc="/path/to/large.jpg" 
/>

4. All available component props.

moveType: PropTypes.string, // pan or drag
zoomType: PropTypes.string, // click or hover
src: PropTypes.string.isRequired,
sources: PropTypes.array,
width: PropTypes.number,
height: PropTypes.number,
hasSpacer: PropTypes.bool,
imgAttributes: PropTypes.object,
zoomSrc: PropTypes.string,
zoomScale: PropTypes.number,
zoomPreload: PropTypes.bool,
fadeDuration: PropTypes.number,
fullscreenOnMobile: PropTypes.bool,
mobileBreakpoint: PropTypes.number,
hideCloseButton: PropTypes.bool,
hideHint: PropTypes.bool,
className: PropTypes.string,
afterZoomIn: PropTypes.func,
afterZoomOut: PropTypes.func

Preview:

Download Details:

Author: laurenashpole

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/laurenashpole/react-inner-image-zoom

License: MIT

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this