-

- All examples consist of images with differing sizes and aspect ratios shuffled on every page load. Resizing the browser window will adjust the gallery layout seamlessly. -

- -

Demo

- -
-

Code

-
- - - -

Installation

- -

Using npm:

- -
npm install --save react-grid-gallery
-
- - -

-Quick (and dirty) Start

- -
-
import React from 'react';
-import { render } from 'react-dom';
-import Gallery from 'react-grid-gallery';
-
-const IMAGES =
-[{
-        src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
-        thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
-        thumbnailWidth: 320,
-        thumbnailHeight: 174,
-        isSelected: true,
-        caption: "After Rain (Jeshu John - designerspics.com)"
-},
-{
-        src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
-        thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
-        thumbnailWidth: 320,
-        thumbnailHeight: 212,
-        tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
-        caption: "Boats (Jeshu John - designerspics.com)"
-},
-
-{
-        src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
-        thumbnail: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
-        thumbnailWidth: 320,
-        thumbnailHeight: 212
-}]
-
-render(
-        <Gallery images={IMAGES}/>,
-        document.getElementById('example-0')
-);
- - -

See the documentation for all available options

- - -

Examples

- -

Pre-selected Images

- -
-

Code

-
- -

Permanently selected Images

- -
-

Code

-
- -

Simple Gallery (Lightbox and Image Selection Disabled) -

- -
-

Code

-
- -

Custom Overlay (on thumbnail hover) -

- -
-

Code

-
- -

Thumbnail Captions -

- -
-

Code

-
- -

Custom Controls -

- -
-

Code

-
- -

Custom Image Component (useful for lazy loading) -

- -
-

Code

-
- - -