React Amazon Gallery

Inspired by Amazon's clean display for products.

Github Page

Sample Screencap

![Image of Gallery] (http://i.imgur.com/CHVrtc3.jpg)

Current Capabilities

1. One Dimensional Gallery View

• Renders a one dimensional array of image src strings.

2. Two Dimensional Gallery View

• Allows for clean browsing experience of product variations and similar perspective combinations which would look terrible in a grid.

Prerequisites

You should be using NodeJS and ReactJS

Installation

React Amazon Gallery is available as an npm package.

npm install react-amazon-gallery [-S]

or

yarn add react-amazon-gallery

Usage

Using React Amazon Gallery is very straightforward. Once it is included in your project, you can use the components this way:

import React from 'react';
import Gallery from 'react-amazon-gallery';

let images = [
  './images/image_1.jpg',
  './images/image_2.jpg',
  './images/image_3.jpg',
  './images/image_4.jpg',
  ...
]

const MyAwesomeReactComponent = () => (
  <Gallery images={images} />
);

export default MyAwesomeReactComponent;

Customization

Key	-	Type	Description
images		Array	A 1D or a 2D Array of images. (2D) Images in Zero Index will be the secondary thumbnails
height		Integer/String	This will set the total height of the chart.
width		Integer/String	This will set override the width of the chart.
main		object	This is the config object for the main thumbnails
.	orientation	Enum	'vertical' or 'horizontal' will change the flow of image thumbnails
.	overlay	Boolean	If set, the image thumbnails will not be given gutter padding
.	posY	Enum	'top' or 'bot' will shift where the thumbnails are positioned
.	posX	Enum	'left' or 'right' will shift where the thumbnails are positioned
.	spacing	Integer	Distance between image thumbnails
.	size	Integer	Sets the size of the thumbnails
.	hlColor	String	Accepts CSS colors (Hex/Names)
.	hlSize	Integer	Sets the size of the thumbnail's highlight glow effect
style		Object	Style that is passed to SVG.
wrapStyle		Object	Style for wrapper div (div).

Contribute

This project is open source of course!. I'd greatly appreciate any contribution you make. :)

To get started developing simply run

npm start

And open your browser to http://localhost:8000/

I like to develop my components in a demo app that doubles as the Github Page.

Building

This project uses Webpack to develop and bundle the demo page, the config can be found in the config folder.

To transpile the source simply run

npm run babel

To build a new Demo app, run

npm run deploy:prod

License

This project is licensed under the terms of the MIT license