-
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
e5a4458
commit da2fafa
Showing
16 changed files
with
536 additions
and
222 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import React, { Component } from 'react'; | ||
| import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify'; | ||
| import ReactSlick from 'react-slick'; | ||
|
|
||
| import front_500 from '../images/versace-blue/front-500.jpg' | ||
| import front_779 from '../images/versace-blue/front-779.jpg'; | ||
| import front_1020 from '../images/versace-blue/front-1020.jpg'; | ||
| import front_1200 from '../images/versace-blue/front-1200.jpg'; | ||
| import front_1426 from '../images/versace-blue/front-1426.jpg'; | ||
|
|
||
| import back_500 from '../images/versace-blue/back-500.jpg' | ||
| import back_779 from '../images/versace-blue/back-779.jpg'; | ||
| import back_1020 from '../images/versace-blue/back-1020.jpg'; | ||
| import back_1200 from '../images/versace-blue/back-1200.jpg'; | ||
| import back_1426 from '../images/versace-blue/back-1426.jpg'; | ||
|
|
||
| const frontSrcSet = [ | ||
| { src: front_500, setting: '500w' }, | ||
| { src: front_779, setting: '779w' }, | ||
| { src: front_1020, setting: '1020w' }, | ||
| { src: front_1200, setting: '1200w' }, | ||
| { src: front_1426, setting: '1426w' } | ||
| ] | ||
| .map(item => `${item.src} ${item.setting}`) | ||
| .join(', '); | ||
|
|
||
| const backSrcSet = [ | ||
| { src: back_500, setting: '500w' }, | ||
| { src: back_779, setting: '779w' }, | ||
| { src: back_1020, setting: '1020w' }, | ||
| { src: back_1200, setting: '1200w' }, | ||
| { src: back_1426, setting: '1426w' } | ||
| ] | ||
| .map(item => `${item.src} ${item.setting}`) | ||
| .join(', '); | ||
|
|
||
| const dataSource = [ | ||
| { | ||
| srcSet: frontSrcSet, | ||
| small: front_500, | ||
| large: front_1426 | ||
| }, | ||
| { | ||
| srcSet: backSrcSet, | ||
| small: back_500, | ||
| large: back_1426 | ||
| } | ||
| ]; | ||
|
|
||
| export default class ReactSlickExample extends Component { | ||
| render() { | ||
| const { | ||
| rimProps, | ||
| rsProps | ||
| } = this.props; | ||
|
|
||
| return ( | ||
| <ReactSlick | ||
| {...{ | ||
| dots: true, | ||
| infinite: true, | ||
| speed: 500, | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1 | ||
| }} | ||
| {...rsProps} | ||
| > | ||
| {dataSource.map((src, index) => ( | ||
| <div key={index}> | ||
| <ReactImageMagnify | ||
| {...{ | ||
| largeImage: { | ||
| alt: '', | ||
| src: src.large, | ||
| width: 1426, | ||
| height: 2000 | ||
| }, | ||
| smallImage: { | ||
| isFluidWidth: true, | ||
| alt: 'Wristwatch by Versace', | ||
| src: src.small, | ||
| srcSet: src.srcSet, | ||
| sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px' | ||
| } | ||
| }} | ||
| {...rimProps} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </ReactSlick> | ||
| ); | ||
| } | ||
| } |
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,60 @@ | ||
| import React, { Component } from 'react'; | ||
| import ReactSlick from '../components/ReactSlick'; | ||
| import SpacedSpan from '../components/SpacedSpan'; | ||
|
|
||
| import './app.css'; | ||
| import './react-slick.css'; | ||
|
|
||
| export default class ReactSlickExample extends Component { | ||
| render() { | ||
| return ( | ||
| <div className="fluid react-slick"> | ||
| <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)' } | ||
| } | ||
| }}/> | ||
| </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/pages/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
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
Oops, something went wrong.