Pro Gallery

Blazing fast & beautiful galleries built for the web. try it out

Installation

Install with npm

npm i -S pro-gallery

or yarn

yarn add pro-gallery

Basic Usage

import { ProGallery } from 'pro-gallery';
import 'pro-gallery/dist/statics/main.css';

<ProGallery
  items={images}
  styles={styleParams}
  container={container}
/>

To see more options and a real usage example, use the playground code as reference

Items

A list of objects each containing at least an id, dto, and metadata.

const items = [
  {
    itemId: 'sample-id',
    mediaUrl: 'sample-url',
    orderIndex: 0,
    metaData: {
      type: 'image',
      height: 200,
      width: 100,
      name: 'sample-filename',
      title: 'sample-title',
      description: 'sample-description',
      focalPoint: [0, 0],
      link: {
        url: 'http://example.com',
        target: '_blank'
      },
    }
  },
  {...},
  {...}
]

container

An object containing the width and height properties for the gallery

const container = {
  width: 1000,
  height: 500
}

styles

A list of the styles and behaviour parameters for the gallery. To create you list of styles, use the playground and copy the generated code.

Contribute

To run the environment locally:

1. Clone the repo

  cd <YOUR_CODE_DIRECTORY>
  git clone [email protected]:wix-incubator/pro-gallery.git

2. Install lerna

npm i -g lerna

3. Install Dependencies:

lerna run bootstrap --hoist

4. Run the packages:

lerna run --parallel start

The playground will open in localhost:3000, linked to a local instance of the gallery and layout.

License