react-photoswipe

WebJar for react-photoswipe

License	MIT
Categories	React User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	react-photoswipe
Last Version	1.2.0
Release Date	Aug 18, 2016
Type	jar
Description	react-photoswipe WebJar for react-photoswipe
Project URL	http://webjars.org
Source Code Management	https://github.com/vn38minhtran/react-photoswipe

Download react-photoswipe

Filename	Size
react-photoswipe-1.2.0.pom
react-photoswipe-1.2.0.jar	67 KB
react-photoswipe-1.2.0-sources.jar	22 bytes
react-photoswipe-1.2.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/react-photoswipe/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>react-photoswipe</artifactId>
    <version>1.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/react-photoswipe/
implementation 'org.webjars.bower:react-photoswipe:1.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/react-photoswipe/
implementation ("org.webjars.bower:react-photoswipe:1.2.0")

Apache Buildr

'org.webjars.bower:react-photoswipe:jar:1.2.0'

Apache Ivy

<dependency org="org.webjars.bower" name="react-photoswipe" rev="1.2.0">
  <artifact name="react-photoswipe" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='react-photoswipe', version='1.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "react-photoswipe" % "1.2.0"

Leiningen

[org.webjars.bower/react-photoswipe "1.2.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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.

Versions

Version
1.2.0 Aug 18, 2016