Giter Club home page Giter Club logo

react-photoswipe's Introduction

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.

react-photoswipe's People

Contributors

minhtranite avatar cookpete avatar autarc avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.