react-photoswipe

WebJar for react-photoswipe

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

react-photoswipe
Last Version

Last Version

1.2.0
Release Date

Release Date

Type

Type

jar
Description

Description

react-photoswipe
WebJar for react-photoswipe
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/vn38minhtran/react-photoswipe

Download react-photoswipe

How to add to project

<!-- 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>
// https://jarcasting.com/artifacts/org.webjars.bower/react-photoswipe/
implementation 'org.webjars.bower:react-photoswipe:1.2.0'
// https://jarcasting.com/artifacts/org.webjars.bower/react-photoswipe/
implementation ("org.webjars.bower:react-photoswipe:1.2.0")
'org.webjars.bower:react-photoswipe:jar:1.2.0'
<dependency org="org.webjars.bower" name="react-photoswipe" rev="1.2.0">
  <artifact name="react-photoswipe" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='react-photoswipe', version='1.2.0')
)
libraryDependencies += "org.webjars.bower" % "react-photoswipe" % "1.2.0"
[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