-
Notifications
You must be signed in to change notification settings - Fork 161
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
187f012
commit fd1c628
Showing
29 changed files
with
2,535 additions
and
902 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 '../styles/examples.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/components/Basic.js#L15-L26"> | ||
| source code | ||
| </a> | ||
| </SpacedSpan> | ||
| for details. | ||
| </p> | ||
| </div> | ||
| <div style={{height: '500px'}} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
87 changes: 87 additions & 0 deletions
87
example/src/components/EnlargedImageContainerDimensions.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React, { Component } from 'react'; | ||
| import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify'; | ||
| import SpacedSpan from '../components/SpacedSpan'; | ||
|
|
||
| import '../styles/examples.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'; | ||
|
|
||
| export default class EnlargedImageContainerDimensions 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 {...{ | ||
| smallImage: { | ||
| alt: 'Wristwatch by Ted Baker London', | ||
| isFluidWidth: true, | ||
| src: watchImg1200, | ||
| srcSet: this.srcSet, | ||
| sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px' | ||
| }, | ||
| largeImage: { | ||
| src: watchImg1200, | ||
| width: 1200, | ||
| height: 1800 | ||
| }, | ||
| enlargedImageContainerDimensions: { | ||
| width: '200%', | ||
| height: '100%' | ||
| } | ||
| }} /> | ||
| </div> | ||
| <div className="fluid__instructions"> | ||
| <h3>Enlarged Image Container Dimensions Example</h3> | ||
| <p> | ||
| Specify dimensions as percentage of small image or number of pixels. | ||
| </p> | ||
| <p> | ||
| May be percentage for one dimension and number for the other. | ||
| </p> | ||
| <p> | ||
| This example specifies width of | ||
| <SpacedSpan className="code">200%</SpacedSpan> | ||
| and height of | ||
| <SpacedSpan className="code">100%.</SpacedSpan> | ||
| </p> | ||
| <p> | ||
| Please see | ||
| <SpacedSpan> | ||
| <a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/components/EnlargedImageContainerDimensions.js#L53-L56"> | ||
| source code | ||
| </a> | ||
| </SpacedSpan> | ||
| for details. | ||
| </p> | ||
| </div> | ||
| <div style={{height: '500px'}} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React, { Component } from 'react'; | ||
| import ReactSlick from '../components/ReactSlick'; | ||
| import SpacedSpan from '../components/SpacedSpan'; | ||
|
|
||
| import '../styles/examples.css'; | ||
|
|
||
| export default class ReactSlickExample extends Component { | ||
| render() { | ||
| return ( | ||
| <div className="fluid react-slick"> | ||
| <div className="fluid__image-container"> | ||
| <ReactSlick {...{ | ||
| rimProps: { | ||
| enlargedImagePortalId: 'portal', | ||
| enlargedImageContainerDimensions: { | ||
| width: '200%', | ||
| height: '100%' | ||
| } | ||
| } | ||
| }}/> | ||
| </div> | ||
| <div className="fluid__instructions" style={{position: 'relative'}}> | ||
| <div | ||
| id="portal" | ||
| className="portal" | ||
| /> | ||
| <h3>External Enlarged Image Example</h3> | ||
| <p> | ||
| Render enlarged image into an HTML element of your choosing. | ||
| </p> | ||
| <p> | ||
| Ignored for touch input by default but will be honored if | ||
| isEnlargedImagePortalEnabledForTouch is implemented. | ||
| </p> | ||
| <p> | ||
| Use cases include a scenario where an ancestor element of | ||
| react-image-magnify implements overflow hidden. | ||
| </p> | ||
| <p> | ||
| Requires React v16. | ||
| </p> | ||
| <p> | ||
| Please see | ||
| <SpacedSpan> | ||
| <a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/components/ExternalEnlargedImage.js"> | ||
| example source code | ||
| </a> | ||
| </SpacedSpan> | ||
| for details. | ||
| </p> | ||
| </div> | ||
| <div style={{height: '1000px'}} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React, { Component } from 'react'; | ||
| import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify'; | ||
|
|
||
| import '../styles/app.css'; | ||
|
|
||
| import watchImg from '../images/wristwatch_1200.jpg'; | ||
|
|
||
| export default class extends Component { | ||
| render() { | ||
| return ( | ||
| <div className="fluid"> | ||
| <div className="fluid__image-container"> | ||
| <ReactImageMagnify {...{ | ||
| smallImage: { | ||
| alt: 'Wristwatch by Ted Baker London', | ||
| src: watchImg, | ||
| width: 300, | ||
| height: 450 | ||
| }, | ||
| largeImage: { | ||
| src: watchImg, | ||
| width: 1200, | ||
| height: 1800 | ||
| }, | ||
| isHintEnabled: true | ||
| }} /> | ||
| </div> | ||
| <div className="fixed__instructions"> | ||
| <h3>Fixed Width Small Image Example</h3> | ||
| <p>Specify small image width and height as numbers</p> | ||
| <p>Small image is not fluid width.</p> | ||
| </div> | ||
| <div style={{height: '1000px'}} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.