diff --git a/README.md b/README.md
index b235a22..cadf59a 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,7 @@ srcSet | String | | Default srcset attribute for a responsive original image.
sizes | String | | Default sizes attribute for use with srcset.
sources | Array | | A list of image sources for using the picture tag to serve the appropriate original image (see below for more details).
zoomSrc | String | | URL for the larger zoom image. Falls back to original image src if not defined.
+zoomScale | Number | 1 | Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%).
alt | String | | Alternative text for the original image.
moveType | String | pan | `pan` or `drag`. The user behavior for moving zoomed images on non-touch devices.
zoomType | String | click | `click` or `hover`. The zoom behavior for images.
@@ -73,6 +74,7 @@ mobileBreakpoint | Number | 640 | The maximum breakpoint for fullscreen zoom ima
className | String | | Custom classname for styling the component.
afterZoomIn | Function | | Function to be called after zoom in.
afterZoomOut | Function | | Function to be called after zoom out.
+startsActive | boolean | | if set to true, sets the initial value of isActive to true.
### Sources
diff --git a/demo/src/index.js b/demo/src/index.js
index 8307b78..a265d0b 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -18,7 +18,7 @@ class Demo extends Component {
Drag Example
-
+
);
diff --git a/package.json b/package.json
index 307f514..5dcafaa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-inner-image-zoom",
- "version": "1.0.6",
+ "version": "1.3.0",
"description": "A React component for magnifying an image within its original container.",
"main": "lib/index.js",
"module": "es/index.js",
diff --git a/src/InnerImageZoom/InnerImageZoom.js b/src/InnerImageZoom/InnerImageZoom.js
index db7b849..6cc19b5 100644
--- a/src/InnerImageZoom/InnerImageZoom.js
+++ b/src/InnerImageZoom/InnerImageZoom.js
@@ -9,13 +9,12 @@ class InnerImageZoom extends Component {
super(props);
this.state = {
- isActive: false,
+ isActive: (props.startsActive === true ? true : false),
isTouch: false,
isZoomed: false,
isFullscreen: false,
isDragging: false,
currentMoveType: props.moveType,
- currentZoomType: props.zoomType,
left: 0,
top: 0
};
@@ -28,7 +27,7 @@ class InnerImageZoom extends Component {
isActive: true
});
- if (this.state.currentZoomType === 'hover' && !this.state.isZoomed) {
+ if (this.props.zoomType === 'hover' && !this.state.isZoomed) {
this.handleClick(e);
}
}
@@ -68,6 +67,8 @@ class InnerImageZoom extends Component {
handleLoad = (e) => {
this.isLoaded = true;
this.zoomImg = e.target;
+ this.zoomImg.setAttribute('width', this.zoomImg.offsetWidth * this.props.zoomScale);
+ this.zoomImg.setAttribute('height', this.zoomImg.offsetHeight * this.props.zoomScale);
this.bounds = this.getBounds(this.img, false);
this.ratios = this.getRatios(this.bounds, this.zoomImg);
@@ -312,18 +313,21 @@ InnerImageZoom.propTypes = {
sizes: PropTypes.string,
sources: PropTypes.array,
zoomSrc: PropTypes.string,
+ zoomScale: PropTypes.number,
alt: PropTypes.string,
fadeDuration: PropTypes.number,
fullscreenOnMobile: PropTypes.bool,
mobileBreakpoint: PropTypes.number,
className: PropTypes.string,
afterZoomIn: PropTypes.func,
- afterZoomOut: PropTypes.func
+ afterZoomOut: PropTypes.func,
+ startsActive: PropTypes.bool
};
InnerImageZoom.defaultProps = {
moveType: 'pan',
zoomType: 'click',
+ zoomScale: 1,
fadeDuration: 150,
mobileBreakpoint: 640
};