Merge pull request #24 from laurenashpole/release/1.2

Zoom on hover, misc package upgrades

README.md

@@ -66,6 +66,7 @@ sources | Array | | A list of image sources for using the picture tag to serve t
 zoomSrc | String | | URL for the larger zoom image. Falls back to original image src if not defined.
 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.
 fadeDuration | Number | 150 | Fade transition time in milliseconds. If zooming in on transparent images, set this to `0` for best results.
 fullscreenOnMobile | Boolean | false | Enables fullscreen zoomed image on touch devices below a specified breakpoint.
 mobileBreakpoint | Number | 640 | The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true.

demo/src/index.js

@@ -12,9 +12,13 @@ class Demo extends Component {
           <h2>Pan Example</h2>
           <InnerImageZoom src="unsplash.jpg" zoomSrc="unsplash-large.jpg" fullscreenOnMobile={true} />
         </div>
+        <div style={{ marginBottom: '30px' }}>
+          <h2>Hover Example</h2>
+          <InnerImageZoom src="unsplash2.jpg" zoomSrc="unsplash2-large.jpg" zoomType="hover" />
+        </div>
         <div style={{ marginBottom: '30px' }}>
           <h2>Drag Example</h2>
-          <InnerImageZoom src="unsplash2.jpg" zoomSrc="unsplash2-large.jpg" fullscreenOnMobile={true} moveType="drag" />
+          <InnerImageZoom src="unsplash3.jpg" zoomSrc="unsplash3-large.jpg" fullscreenOnMobile={true} moveType="drag" />
         </div>
       </div>
     );
@@ -24,4 +28,4 @@ class Demo extends Component {
 render(
   <Demo />,
   document.querySelector('#demo')
-);
+);