JarCastingReact PhotoSwipe
PhotoSwipe, PhotoSwipeGallery component for ReactJS base on PhotoSwipe.
Installation
NPM
npm install --save react-photoswipe
Bower
bower install --save react-photoswipe
Usage
Styles
With webpack:
import 'react-photoswipe/lib/photoswipe.css';
Without webpack:
<link rel="stylesheet" type="text/css" href="path/to/react-photoswipe/lib/photoswipe.css">
JS
PhotoSwipe
import {PhotoSwipe} from 'react-photoswipe';
let isOpen = true;
let items = [
{
src: 'http://lorempixel.com/1200/900/sports/1',
w: 1200,
h: 900,
title: 'Image 1'
},
{
src: 'http://lorempixel.com/1200/900/sports/2',
w: 1200,
h: 900,
title: 'Image 2'
}
];
let options = {
//http://photoswipe.com/documentation/options.html
};
handleClose = () => {
isOpen: false
};
<PhotoSwipe isOpen={isOpen} items={items} options={options} onClose={handleClose}/>
PhotoSwipeGallery
import {PhotoSwipeGallery} from 'react-photoswipe';
let items = [
{
src: 'http://lorempixel.com/1200/900/sports/1',
thumbnail: 'http://lorempixel.com/120/90/sports/1',
w: 1200,
h: 900,
title: 'Image 1'
},
{
src: 'http://lorempixel.com/1200/900/sports/2',
thumbnail: 'http://lorempixel.com/120/90/sports/2',
w: 1200,
h: 900,
title: 'Image 2'
}
];
let options = {
//http://photoswipe.com/documentation/options.html
};
getThumbnailContent = (item) => {
return (
<img src={item.thumbnail} width={120} height={90}/>
);
}
<PhotoSwipeGallery items={items} options={options} thumbnailContent={getThumbnailContent}/>
UMD
<link rel="stylesheet" type="text/css" href="path/to/react-photoswipe/dist/photoswipe.css">
<script src="path/to/react-photoswipe/dist/react-photoswipe.js"></script>
var PhotoSwipe = window.ReactPhotoswipe.PhotoSwipe;
var PhotoSwipeGallery = window.ReactPhotoswipe.PhotoSwipeGallery;
Example here
Props
Note: The first argument of every listener is a Photoswipe instance.
EX:
beforeChange(instance, change);
imageLoadComplete(instance, index, item);
PhotoSwipe
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| isOpen | bool | false | true | |
| items | array | [] | true | http://photoswipe.com/documentation/getting-started.html |
| options | object | {} | false | http://photoswipe.com/documentation/options.html |
| onClose | function | false | Callback after PhotoSwipe close | |
| id | string | false | ||
| className | string | pswp |
||
| beforeChange | function | false | Photoswipe event listener | |
| afterChange | function | false | Photoswipe event listener | |
| imageLoadComplete | function | false | Photoswipe event listener | |
| resize | function | false | Photoswipe event listener | |
| gettingData | function | false | Photoswipe event listener | |
| mouseUsed | function | false | Photoswipe event listener | |
| initialZoomIn | function | false | Photoswipe event listener | |
| initialZoomInEnd | function | false | Photoswipe event listener | |
| initialZoomOut | function | false | Photoswipe event listener | |
| initialZoomOutEnd | function | false | Photoswipe event listener | |
| parseVerticalMargin | function | false | Photoswipe event listener | |
| close | function | false | Photoswipe event listener | |
| unbindEvents | function | false | Photoswipe event listener | |
| destroy | function | false | Photoswipe event listener | |
| updateScrollOffset | function | false | Photoswipe event listener | |
| preventDragEvent | function | false | Photoswipe event listener | |
| shareLinkClick | function | false | Photoswipe event listener |
PhotoSwipeGallery
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| items | array | [] | true | http://photoswipe.com/documentation/getting-started.html |
| options | object | {} | false | http://photoswipe.com/documentation/options.html |
| thumbnailContent | function | <img src={item.src} width='100' height='100'/> |
false | Thumbnail content |
| isOpen | bool | false | false | Use it with onClose prop |
| onClose | function | false | Callback after close | |
| id | string | false | ||
| className | string | pswp-gallery |
||
| beforeChange | function | false | Photoswipe event listener | |
| afterChange | function | false | Photoswipe event listener | |
| imageLoadComplete | function | false | Photoswipe event listener | |
| resize | function | false | Photoswipe event listener | |
| gettingData | function | false | Photoswipe event listener | |
| mouseUsed | function | false | Photoswipe event listener | |
| initialZoomIn | function | false | Photoswipe event listener | |
| initialZoomInEnd | function | false | Photoswipe event listener | |
| initialZoomOut | function | false | Photoswipe event listener | |
| initialZoomOutEnd | function | false | Photoswipe event listener | |
| parseVerticalMargin | function | false | Photoswipe event listener | |
| close | function | false | Photoswipe event listener | |
| unbindEvents | function | false | Photoswipe event listener | |
| destroy | function | false | Photoswipe event listener | |
| updateScrollOffset | function | false | Photoswipe event listener | |
| preventDragEvent | function | false | Photoswipe event listener | |
| shareLinkClick | function | false | Photoswipe event listener |
Demo
View demo or example folder.