PhotoSwipe, PhotoSwipeGallery component for ReactJS base on PhotoSwipe.
JavaScript CSS HTML
Clone or download
Latest commit cbb3ecc Jun 12, 2017
Permalink
Failed to load latest commit information.
dist Open gallery via props Jun 12, 2017
example Open gallery via props Jun 12, 2017
lib Open gallery via props Jun 12, 2017
src Open gallery via props Jun 12, 2017
.babelrc Refactor Jun 11, 2017
.editorconfig Refactor Jun 11, 2017
.eslintignore Refactor Jun 11, 2017
.eslintrc Refactor Jun 11, 2017
.gitignore Refactor Jun 11, 2017
.npmignore Rebuild lib Sep 7, 2015
README.md Update readme Jun 12, 2017
gulpfile.babel.js Refactor Jun 11, 2017
package-lock.json Open gallery via props Jun 12, 2017
package.json Version 1.3.0 Jun 12, 2017
postcss.config.js Refactor Jun 11, 2017
webpack.config.js Refactor Jun 11, 2017

README.md

React 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.