PhotoSwipe, PhotoSwipeGallery component for ReactJS base on PhotoSwipe.
JavaScript CSS HTML
Latest commit edc5b2f Sep 23, 2016 @minhtranite committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
dist Support id, className props Jul 19, 2016
example Version 1.0.1 Apr 10, 2016
lib Support id, className props Jul 19, 2016
src Support id, className props Jul 19, 2016
tasks Version 1.0.1 Apr 10, 2016
.babelrc Version 1.0.1 Apr 10, 2016
.bowerrc Version 1.0.1 Apr 10, 2016
.editorconfig Initial Aug 18, 2015
.eslintrc Version 1.0.1 Apr 10, 2016
.gitignore Rebuild lib Sep 7, 2015
.npmignore Rebuild lib Sep 7, 2015
README.md Update README.md Sep 23, 2016
bower.json Version 1.1.0 Jun 24, 2016
gulpfile.babel.js Version 1.0.1 Apr 10, 2016
package.json Support id, className props Jul 19, 2016
webpack.config.js Version 1.0.1 Apr 10, 2016

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