Merge pull request #27 from laurenashpole/release/1.3

Added starts active and zoom scale props

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
 

demo/src/index.js

@@ -18,7 +18,7 @@ class Demo extends Component {
         </div>
         <div style={{ marginBottom: '30px' }}>
           <h2>Drag Example</h2>
-          <InnerImageZoom src="unsplash3.jpg" zoomSrc="unsplash3-large.jpg" fullscreenOnMobile={true} moveType="drag" />
+          <InnerImageZoom src="unsplash3.jpg" zoomSrc="unsplash3-large.jpg" fullscreenOnMobile={true} moveType="drag" zoomScale={0.9} />
         </div>
       </div>
     );

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",

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