Skip to content

Commit

Permalink
Example: Add Hint and Responsive Images + Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@ethanselzer
ethanselzer committed Apr 2, 2018
1 parent 106b31c commit 84865fb
Show file tree
Hide file tree
Showing 9 changed files with 159 additions and 52 deletions.
16 changes: 8 additions & 8 deletions example/src/components/ReactSlick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,19 +69,19 @@ export default class ReactSlickExample extends Component {
<div key={index}>
<ReactImageMagnify
{...{
largeImage: {
alt: '',
src: src.large,
width: 1426,
height: 2000
},
smallImage: {
isFluidWidth: true,
alt: 'Wristwatch by Versace',
isFluidWidth: true,
src: src.small,
srcSet: src.srcSet,
sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px'
}
},
largeImage: {
src: src.large,
width: 1426,
height: 2000
},
lensStyle: { backgroundColor: 'rgba(0,0,0,.6)' }
}}
{...rimProps}
/>
Expand Down
53 changes: 53 additions & 0 deletions example/src/pages/Basic.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React, { Component } from 'react';
import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify';
import SpacedSpan from '../components/SpacedSpan';

import './app.css';

import watchImg687 from '../images/wristwatch_687.jpg';
import watchImg1200 from '../images/wristwatch_1200.jpg';

export default class BasicExample extends Component {
render() {
return (
<div className="fluid">
<div className="fluid__image-container">
<ReactImageMagnify {...{
smallImage: {
alt: 'Wristwatch by Ted Baker London',
isFluidWidth: true,
src: watchImg687,
},
largeImage: {
src: watchImg1200,
width: 1200,
height: 1800
}
}} />
</div>
<div className="fluid__instructions">
<h3>Basic Example</h3>
<p>
Side by Side enlargement for mouse input.
</p>
<p>
In place enlargement for touch input.
</p>
<p>
Fluid between breakpoints.
</p>
<p>
Please see
<SpacedSpan>
<a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/pages/Basic.js">
source code
</a>
</SpacedSpan>
for details.
</p>
</div>
<div style={{height: '500px'}} />
</div>
);
}
}
18 changes: 8 additions & 10 deletions example/src/pages/EnlargedImageContainerDimensions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,18 @@ export default class EnlargedImageContainerDimensions extends Component {
<div className="fluid">
<div className="fluid__image-container">
<ReactImageMagnify {...{
largeImage: {
alt: '',
src: watchImg1200,
width: 1200,
height: 1800
},
smallImage: {
isFluidWidth: true,
smallImage: {
alt: 'Wristwatch by Ted Baker London',
isFluidWidth: true,
src: watchImg1200,
srcSet: this.srcSet,
sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px'
},
isHintEnabled: true,
largeImage: {
src: watchImg1200,
width: 1200,
height: 1800
},
enlargedImageContainerDimensions: {
width: '200%',
height: '100%'
Expand All @@ -67,7 +65,7 @@ export default class EnlargedImageContainerDimensions extends Component {
May be percentage for one dimension and number for the other.
</p>
<p>
Exmample specifies width of
This example specifies width of
<SpacedSpan className="code">200%</SpacedSpan>
and height of
<SpacedSpan className="code">100%.</SpacedSpan>
Expand Down
9 changes: 1 addition & 8 deletions example/src/pages/ExternalEnlargedImage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,7 @@ export default class ReactSlickExample extends Component {
<div className="fluid__image-container">
<ReactSlick {...{
rimProps: {
isHintEnabled: true,
shouldHideHintAfterFirstActivation: false,
enlargedImagePortalId: 'portal',
enlargedImageContainerDimensions: {
width: '150%',
height: '100%'
},
lensStyle: { backgroundColor: 'rgba(0,0,0,.6)' }
enlargedImagePortalId: 'portal'
}
}}/>
</div>
Expand Down
11 changes: 5 additions & 6 deletions example/src/pages/FixedWidthSmallImage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,17 @@ export default class extends Component {
<div className="fluid">
<div className="fluid__image-container">
<ReactImageMagnify {...{
largeImage: {
alt: '',
src: watchImg,
width: 1200,
height: 1800
},
smallImage: {
alt: 'Wristwatch by Ted Baker London',
src: watchImg,
width: 300,
height: 450
},
largeImage: {
src: watchImg,
width: 1200,
height: 1800
},
isHintEnabled: true
}} />
</div>
Expand Down
57 changes: 57 additions & 0 deletions example/src/pages/Hint.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React, { Component } from 'react';
import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify';
import SpacedSpan from '../components/SpacedSpan';

import './app.css';

import watchImg687 from '../images/wristwatch_687.jpg';
import watchImg1200 from '../images/wristwatch_1200.jpg';

export default class BasicExample extends Component {
render() {
return (
<div className="fluid">
<div className="fluid__image-container">
<ReactImageMagnify {...{
smallImage: {
alt: 'Wristwatch by Ted Baker London',
isFluidWidth: true,
src: watchImg687,
},
largeImage: {
src: watchImg1200,
width: 1200,
height: 1800
},
isHintEnabled: true
}} />
</div>
<div className="fluid__instructions">
<h3>Hint Example</h3>
<p>
Helps inform users of zoom feature.
</p>
<p>
Configurable text for mouse and touch inputs. English defaults provided.
</p>
<p>
Custom component option.
</p>
<p>
Hidden after first interaction by default.
</p>
<p>
Please see
<SpacedSpan>
<a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/pages/Hint.js">
source code
</a>
</SpacedSpan>
for details.
</p>
</div>
<div style={{height: '500px'}} />
</div>
);
}
}
2 changes: 1 addition & 1 deletion example/src/pages/ReactSlick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default class ReactSlickExample extends Component {
<p>
Initial file size optimized via
<SpacedSpan className="code">
srcSet
srcset
</SpacedSpan>
and
<SpacedSpan className="code">
Expand Down
37 changes: 20 additions & 17 deletions example/src/pages/SideBySide.js → example/src/pages/ResponsiveImages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,48 +38,51 @@ export default class BasicExample extends Component {
<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',
isFluidWidth: true,
src: watchImg1200,
srcSet: this.srcSet,
sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px'
},
isHintEnabled: true
largeImage: {
src: watchImg1200,
width: 1200,
height: 1800
}
}} />
</div>
<div className="fluid__instructions">
<h3>Basic Example</h3>
<p>
Side by Side enlargement for mouse input.
</p>
<p>
In place enlargement for touch input.
</p>
<h3>Responsive Images Example</h3>
<p>
Fluid between breakpoints.
</p>
<p>
Initial file size optimized via
<SpacedSpan className="code">
srcSet
srcset
</SpacedSpan>
and
<SpacedSpan className="code">
sizes
</SpacedSpan>
attributes.
</p>
<p>
For more information on responsive images, please try these resources:
<br />
<a href="https://cloudfour.com/thinks/responsive-images-101-definitions">
Responsive Images 101
</a>
<br />
<a href="https://bitsofco.de/the-srcset-and-sizes-attributes/">
Responsive Images - The srcset and sizes Attributes
</a>
</p>
<p>
Please see
<SpacedSpan>
<a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/pages/SideBySide.js">
<a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/pages/ResponsiveImages.js">
source code
</a>
</SpacedSpan>
Expand Down
8 changes: 6 additions & 2 deletions example/src/router.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import React from 'react';
import { Router, Route } from 'react-router';

import SideBySide from './pages/SideBySide';
import Basic from './pages/Basic';
import ResponsiveImages from './pages/ResponsiveImages';
import Hint from './pages/Hint';
import ReactSlick from './pages/ReactSlick';
import EnlargedImageContainerDimensions from './pages/EnlargedImageContainerDimensions';
import FixedWidthSmallImage from './pages/FixedWidthSmallImage';
import ExternalEnlargedImage from './pages/ExternalEnlargedImage';

const Routes = (props) => (
<Router {...props}>
<Route path="/" component={SideBySide} />
<Route path="/" component={Basic} />
<Route path="/responsive-images" component={ResponsiveImages} />
<Route path="/hint" component={Hint} />
<Route path="/react-slick" component={ReactSlick} />
<Route path="/dimensions" component={EnlargedImageContainerDimensions} />
<Route path="/fixed" component={FixedWidthSmallImage} />
Expand Down

0 comments on commit 84865fb

Please sign in to comment.