Example: Add In-Place Page + Cleanup

ethanselzer · Nov 27, 2017 · 5e1ed10 · 5e1ed10
1 parent add4e25
commit 5e1ed10
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Features tinted guide lens, interaction hint, hover intent, long-press gesture,
 ## Demo
 [Responsive Example](https://ethanselzer.github.io/react-image-magnify/#/)
 
-[Fixed Width Example](https://ethanselzer.github.io/react-image-magnify/#/fixed)
+[In-Place Example](https://ethanselzer.github.io/react-image-magnify/#/in-place)
 
 <img src="https://raw.githubusercontent.com/ethanselzer/react-image-magnify/master/images/qrcode.png" width="50" height="50" alt="demo"/>
 
@@ -46,11 +46,7 @@ import ReactImageMagnify from 'react-image-magnify';
             `${watchImg687} 687w`,
             `${watchImg770} 770w`,
             `${watchImg861} 861w`,
-            `${watchImg955} 955w`,
-            `${watchImg1033} 1033w`,
-            `${watchImg1112} 1112w`,
-            `${watchImg1192} 1192w`,
-            `${watchImg1200} 1200w`,
+            `${watchImg955} 955w`
         ].join(', '),
         sizes: '(min-width: 480px) 30vw, 80vw'
     },

diff --git a/example/src/pages/App.css b/example/src/pages/App.css
@@ -12,11 +12,6 @@ body {
   flex-direction: column;
 }
 
-.fluid__image-container {
-  flex: 0 0 auto;
-  margin: 20px auto;
-}
-
 .fluid__instructions {
   flex: 0 0 auto;
   margin: 0 20px;
@@ -29,6 +24,7 @@ body {
 
   .fluid__image-container{
     flex: 0 0 30%;
+    margin: 20px;
   }
 
   .fluid__instructions {

diff --git a/example/src/pages/InPlaceLargeImage.js b/example/src/pages/InPlaceLargeImage.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify';
+
+import './App.css';
+
+import watchImg355 from '../images/wristwatch_355.jpg';
+import watchImg481 from '../images/wristwatch_481.jpg';
+import watchImg584 from '../images/wristwatch_584.jpg';
+import watchImg687 from '../images/wristwatch_687.jpg';
+import watchImg770 from '../images/wristwatch_770.jpg';
+import watchImg861 from '../images/wristwatch_861.jpg';
+import watchImg955 from '../images/wristwatch_955.jpg';
+import watchImg1033 from '../images/wristwatch_1033.jpg';
+import watchImg1112 from '../images/wristwatch_1112.jpg';
+import watchImg1192 from '../images/wristwatch_1192.jpg';
+import watchImg1200 from '../images/wristwatch_1200.jpg';
+
+class App extends Component {
+    get srcSet() {
+        return [
+            `${watchImg355} 355w`,
+            `${watchImg481} 481w`,
+            `${watchImg584} 584w`,
+            `${watchImg687} 687w`,
+            `${watchImg770} 770w`,
+            `${watchImg861} 861w`,
+            `${watchImg955} 955w`,
+            `${watchImg1033} 1033w`,
+            `${watchImg1112} 1112w`,
+            `${watchImg1192} 1192w`,
+            `${watchImg1200} 1200w`,
+        ].join(', ');
+    }
+
+    render() {
+        return (
+            <div className="fluid">
+                <div className="fluid__image-container">
+                    <ReactImageMagnify {...{
+                        largeImage: {
+                            alt: '',
+                            src: watchImg1200,
+                            width: 1200,
+                            height: 1800
+                        },
+                        smallImage: {
+                            isFluidWidth: true,
+                            alt: 'Wristwatch by Ted Baker London',
+                            src: watchImg1200,
+                            srcSet: this.srcSet,
+                            sizes: '(min-width: 480px) 30vw, 80vw'
+                        },
+                        isHintEnabled: true,
+                        enlargedImagePosition: 'over'
+                    }} />
+                </div>
+                <div className="fluid__instructions">
+                    <h3>Touch</h3>
+                    <p className="App-intro">Press (long touch) image to magnify. Pan (drag) to traverse image.</p>
+                    <p className="App-intro">Note the page can be scrolled when touch begins on image.</p>
+                    <h3>Mouse</h3>
+                  <p>Hover image to magnify</p>
+                    <p>
+                        Specify enlargedImagePosition: 'over' for in-place image enlargement
+                        in the mouse environment.
+                    </p>
+                </div>
+                <div style={{height: '1000px'}} />
+            </div>
+        );
+    }
+}
+
+export default App;
diff --git a/example/src/router.js b/example/src/router.js
@@ -3,11 +3,13 @@ import { Router, Route } from 'react-router';
 
 import FluidWidthSmallImage from './pages/FluidWidthSmallImage';
 import FixedWidthSmallImage from './pages/FixedWidthSmallImage';
+import InPlaceLargeImage from './pages/InPlaceLargeImage';
 
 const Routes = (props) => (
     <Router {...props}>
         <Route path="/" component={FluidWidthSmallImage} />
         <Route path="/fixed" component={FixedWidthSmallImage} />
+        <Route path="/in-place" component={InPlaceLargeImage} />
     </Router>
 );
 

diff --git a/package.json b/package.json
@@ -22,7 +22,9 @@
     "magnify",
     "expand",
     "lens",
+    "detail",
     "ecommerce",
+    "store",
     "shopping",
     "product"
   ],