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