No curation and no tricks, just beautifully justified images.
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
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, 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, 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 //look ma, no caption! }] render( <Gallery images={IMAGES}/>, document.getElementById('example-0') );
Image Options
| Property | Type | Default | Description |
|---|---|---|---|
| src | string | undefined | Required. A string referring to any valid image resource (file, url, etc). |
| thumbnail | string | undefined | Required. A string referring to any valid image resource (file, url, etc). |
| thumbnailWidth | number | undefined | Required. Width of the thumbnail image. |
| thumbnailHeight | number | undefined | Required. Height of the thumbnail image. |
| caption | string | undefined | Optional. Image caption. |
| srcset | array | undefined | Optional. Array of srcsets for lightbox. |
Gallery Options
| Property | Type | Default | Description |
|---|---|---|---|
| images | array | undefined | Required. An array of objects containing image properties (see Image Options above). |
| enableImageSelection | bool | true | Optional. Allow images to be selectable. Setting this option to false whilst supplying a non empty selectedImages array will result in those images being permanently selected. |
| selectedImages | array | empty | Optional. An array of image indicies to set as selected upon gallery creation (Note: this selection is permanent if enableImageSelection: false). |
| onSelectedImagesChange | func | undefined | Optional. Function to execute when selectedImages array changes (i.e. image selection has been updated). Optional arg: selectedImages array. This function is only executable when enableImageSelection: true. |
| rowHeight | number | 180 | Optional. The height of each row in the gallery. |
| margin | number | 2 | Optional. The margin around each image in the gallery. |
| enableLightbox | bool | true | Optional. Enable lightbox display of full size image when thumbnail clicked. |
| onClickThumbnail | func | openLightbox | Optional. Function to execute when gallery thumbnail clicked. Overrides openLightbox. |
Lightbox Options
| Property | Type | Default | Description |
|---|---|---|---|
| backdropClosesModal | bool | false | Optional. Allow users to exit the lightbox by clicking the backdrop. |
| currentImage | number | 0 | Optional. The index of the image to display initially (only relevant when used in conjunction with isOpen: true property). |
| preloadNextImage | bool | true | Optional. Based on the direction the user is navigating, preload the next available image. |
| customControls | array | undefined | Optional. An array of elements to display as custom controls on the top of lightbox. |
| enableKeyboardInput | bool | true | Optional. Supports keyboard input - esc, arrow left, and arrow right. |
| imageCountSeparator | string | ' of ' | Optional. Customize separator in the image count. |
| isOpen | bool | false | Optional. Whether or not the lightbox is displayed when gallery first rendered (can be used in conjunction with currentImage property, otherwise the first image will be diplayed). |
| showCloseButton | bool | true | Optional. Display a close "X" button in top right corner. |
| showImageCount | bool | true | Optional. Display image index, e.g., "3 of 20". |
Using srcset:
images={[{
src: 'http://example.com/example/img1.jpg',
srcset: [
'http://example.com/example/img1_1024.jpg 1024w',
'http://example.com/example/img1_800.jpg 800w',
'http://example.com/example/img1_500.jpg 500w',
'http://example.com/example/img1_320.jpg 320w',
],
thumbnail: 'http://example.com/example/thumbnailImg1.jpg',
caption: "Image 1",
thumbnailWidth: 180,
thumbnailHeight: 320
},
{
src: 'http://example.com/example/img2.jpg',
srcset: [
'http://example.com/example/img2_1024.jpg 1024w',
'http://example.com/example/img2_800.jpg 800w',
'http://example.com/example/img2_500.jpg 500w',
'http://example.com/example/img2_320.jpg 320w',
],
thumbnail: 'http://example.com/example/thumbnailImg2.jpg',
caption: "Image 2",
thumbnailWidth: 240,
thumbnailHeight: 165
}
Read more about the srcset and sizes attributes here: https://ericportis.com/posts/2014/srcset-sizes/.
General Notes
As the inspiration for this component comes from Google Photos, very small thumbnails may not be the most aesthetically pleasing due to the border size applied when selected. A sensible rowHeight default of 180px has been chosen, but rowHeights down to 100px are still reasonable.
Gallery width is determined by the containing element.
Image Options:
thumbnailcan point to the same resource assrc, bearing in mind the resultant data size of the gallery and page load cost. Thumbnails of whatever size will be scaled to matchrowHeight.
- If you don't know your
thumbnailWidthandthumbnailHeightvalues, you can find these out using any number of javascript hacks, bearing in mind the load penalty associated with these methods.
License
React Grid Gallery is free to use for personal and commercial projects under the MIT License. Attribution is not required, but appreciated.
Acknowledgements
Visual design inspired by Google Photos.
Thumbnail viewport implementation inspired by GPlusGallery by Florian Maul.
Backend lightbox functionality via React Images by jossmac.
Demo stock photos
Examples
Pre-selected Images
import React from 'react'; import ReactDOM from 'react-dom'; import Gallery from 'react-grid-gallery'; class Demo1 extends React.Component { constructor(props){ super(props); this.state = { images: this.props.images, selected: [3,7,5] }; } render () { return ( <div style={{ display: "block", minHeight: "1px", width: "100%", border: "1px solid #ddd", overflow: "auto"}}> <Gallery images={this.state.images} selectedImages={this.state.selected}/> </div> ); } } Demo1.propTypes = { images: React.PropTypes.arrayOf( React.PropTypes.shape({ src: React.PropTypes.string.isRequired, thumbnail: React.PropTypes.string.isRequired, srcset: React.PropTypes.array, caption: React.PropTypes.string, thumbnailWidth: React.PropTypes.number.isRequired, thumbnailHeight: React.PropTypes.number.isRequired }) ).isRequired }; Demo1.defaultProps = { images: shuffleArray([ { src: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_b.jpg", thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg", thumbnailWidth: 240, thumbnailHeight: 320, caption: "8H (gratisography.com)" }, { src: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_b.jpg", thumbnail: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_n.jpg", thumbnailWidth: 320, thumbnailHeight: 190, caption: "286H (gratisography.com)" }, { src: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg", thumbnailWidth: 320, thumbnailHeight: 148, caption: "315H (gratisography.com)" }, { src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "201H (gratisography.com)" }, { src: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_b.jpg", thumbnail: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_n.jpg", thumbnailWidth: 248, thumbnailHeight: 320, caption: "Big Ben (Tom Eversley - isorepublic.com)" }, { src: "https://c7.staticflickr.com/9/8785/28687743710_3580fcb5f0_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8785/28687743710_3580fcb5f0_n.jpg", thumbnailWidth: 320, thumbnailHeight: 113, caption: "Red Zone - Paris (Tom Eversley - isorepublic.com)" }, { src: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_n.jpg", thumbnailWidth: 313, thumbnailHeight: 320, caption: "Wood Glass (Tom Eversley - isorepublic.com)" }, { src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg", thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)" } ]) }; ReactDOM.render(<Demo1 />, document.getElementById('demo1'));
Permanently Selected Images
import React from 'react'; import ReactDOM from 'react-dom'; import Gallery from 'react-grid-gallery'; class Demo2 extends React.Component { constructor(props){ super(props); this.state = { images: this.props.images, selected: [2,0,6] }; } render () { return ( <div style={{ display: "block", minHeight: "1px", width: "100%", border: "1px solid #ddd", overflow: "auto"}}> <Gallery images={this.state.images} enableImageSelection={false} selectedImages={this.state.selected}/> </div> ); } } Demo2.propTypes = { images: React.PropTypes.arrayOf( React.PropTypes.shape({ src: React.PropTypes.string.isRequired, thumbnail: React.PropTypes.string.isRequired, srcset: React.PropTypes.array, caption: React.PropTypes.string, thumbnailWidth: React.PropTypes.number.isRequired, thumbnailHeight: React.PropTypes.number.isRequired }) ).isRequired }; Demo2.defaultProps = { images: shuffleArray([ { src: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_b.jpg", thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg", thumbnailWidth: 240, thumbnailHeight: 320, caption: "8H (gratisography.com)" }, { src: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_b.jpg", thumbnail: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_n.jpg", thumbnailWidth: 320, thumbnailHeight: 190, caption: "286H (gratisography.com)" }, { src: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg", thumbnailWidth: 320, thumbnailHeight: 148, caption: "315H (gratisography.com)" }, { src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "201H (gratisography.com)" }, { src: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_b.jpg", thumbnail: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_n.jpg", thumbnailWidth: 248, thumbnailHeight: 320, caption: "Big Ben (Tom Eversley - isorepublic.com)" }, { src: "https://c7.staticflickr.com/9/8785/28687743710_3580fcb5f0_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8785/28687743710_3580fcb5f0_n.jpg", thumbnailWidth: 320, thumbnailHeight: 113, caption: "Red Zone - Paris (Tom Eversley - isorepublic.com)" }, { src: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_n.jpg", thumbnailWidth: 313, thumbnailHeight: 320, caption: "Wood Glass (Tom Eversley - isorepublic.com)" }, { src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg", thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)" } ]) }; ReactDOM.render(<Demo2 />, document.getElementById('demo2'));
Simple Gallery (Lightbox and Image Selection Disabled)
import React from 'react'; import ReactDOM from 'react-dom'; import Gallery from '../src/Gallery'; class Demo3 extends React.Component { constructor(props){ super(props); this.state = { images: this.props.images }; } render () { return ( <div style={{ display: "block", minHeight: "1px", width: "100%", border: "1px solid #ddd", overflow: "auto"}}> <Gallery images={this.state.images} enableLightbox={false} enableImageSelection={false}/> </div> ); } } Demo3.propTypes = { images: React.PropTypes.arrayOf( React.PropTypes.shape({ src: React.PropTypes.string.isRequired, thumbnail: React.PropTypes.string.isRequired, srcset: React.PropTypes.array, caption: React.PropTypes.string, thumbnailWidth: React.PropTypes.number.isRequired, thumbnailHeight: React.PropTypes.number.isRequired }) ).isRequired }; Demo3.defaultProps = { images: shuffleArray([ { 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, caption: "After Rain (Jeshu John - designerspics.com)" }, { src: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_n.jpg", thumbnailWidth: 320, thumbnailHeight: 183, caption: "37H (gratispgraphy.com)" }, { src: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_n.jpg", thumbnailWidth: 271, thumbnailHeight: 320, caption: "Orange Macro (Tom Eversley - isorepublic.com)" }, { src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "201H (gratisography.com)" }, { src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg", thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)" }, { src: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_b.jpg", thumbnail: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Man on BMX (Tom Eversley - isorepublic.com)" }, { src: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_b.jpg", thumbnail: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Ropeman - Thailand (Tom Eversley - isorepublic.com)" }, { src: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_b.jpg", thumbnail: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_n.jpg", thumbnailWidth: 257, thumbnailHeight: 320, caption: "A photo by 贝莉儿 NG. (unsplash.com)" } ]) }; ReactDOM.render(<Demo3 />, document.getElementById('demo3'));
Code Sample (from demo at the top of the page)
import React from 'react'; import ReactDOM from 'react-dom'; import Gallery from 'react-grid-gallery'; import CheckButton from '../src/CheckButton'; class Demo0 extends React.Component { constructor(props){ super(props); this.state = { images: this.props.images, selectedImages: [], selectAllChecked: false }; this.setSelectedImages = this.setSelectedImages.bind(this); this.getSelectedImages = this.getSelectedImages.bind(this); this.onClickSelectAll = this.onClickSelectAll.bind(this); } setSelectedImages (selectedImages) { this.setState({ selectedImages: selectedImages }); if(selectedImages.length < this.state.images.length){ this.setState({ selectAllChecked: false }); } else { this.setState({ selectAllChecked: true }); } } getSelectedImages () { return this.state.selectedImages.toString(); } onClickSelectAll () { var selectAllChecked = !this.state.selectAllChecked; this.setState({ selectAllChecked: selectAllChecked }); if(selectAllChecked){ this.setState({ selectedImages: Array.from(Array(this.state.images.length).keys()) }); } else { this.setState({ selectedImages: [] }); } } render () { return ( <div> <CheckButton index={0} isSelected={this.state.selectAllChecked} onClick={this.onClickSelectAll} parentHover={true} color={"rgba(0,0,0,0.54)"} selectedColor={"#4285f4"} hoverColor={"rgba(0,0,0,0.54)"}/> <div style={{ height: "36px", display: "flex", alignItems: "center" }}> select all </div> <div style={{ padding: "2px", color: "#666" }}>Selected images: {this.getSelectedImages()}</div> <div style={{ display: "block", minHeight: "1px", width: "100%", border: "1px solid #ddd", overflow: "auto"}}> <Gallery images={this.state.images} selectedImages={this.state.selectedImages} onSelectedImagesChange={this.setSelectedImages}/> </div> </div> ); } } Demo0.propTypes = { images: React.PropTypes.arrayOf( React.PropTypes.shape({ src: React.PropTypes.string.isRequired, thumbnail: React.PropTypes.string.isRequired, srcset: React.PropTypes.array, caption: React.PropTypes.string, thumbnailWidth: React.PropTypes.number.isRequired, thumbnailHeight: React.PropTypes.number.isRequired }) ).isRequired }; Demo0.defaultProps = { images: shuffleArray([ { 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, 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, 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, caption: "Color Pencils (Jeshu John - designerspics.com)" }, { src: "https://c7.staticflickr.com/9/8546/28354329294_bb45ba31fa_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8546/28354329294_bb45ba31fa_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Red Apples with other Red Fruit (foodiesfeed.com)" }, { src: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_n.jpg", thumbnailWidth: 320, thumbnailHeight: 183, caption: "37H (gratispgraphy.com)" }, { src: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_b.jpg", thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg", thumbnailWidth: 240, thumbnailHeight: 320, caption: "8H (gratisography.com)" }, { src: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_b.jpg", thumbnail: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_n.jpg", thumbnailWidth: 320, thumbnailHeight: 190, caption: "286H (gratisography.com)" }, { src: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg", thumbnailWidth: 320, thumbnailHeight: 148, caption: "315H (gratisography.com)" }, { src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "201H (gratisography.com)" }, { src: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_b.jpg", thumbnail: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_n.jpg", thumbnailWidth: 248, thumbnailHeight: 320, caption: "Big Ben (Tom Eversley - isorepublic.com)" }, { src: "https://c7.staticflickr.com/9/8785/28687743710_3580fcb5f0_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8785/28687743710_3580fcb5f0_n.jpg", thumbnailWidth: 320, thumbnailHeight: 113, caption: "Red Zone - Paris (Tom Eversley - isorepublic.com)" }, { src: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_n.jpg", thumbnailWidth: 313, thumbnailHeight: 320, caption: "Wood Glass (Tom Eversley - isorepublic.com)" }, { src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg", thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)" }, { src: "https://c4.staticflickr.com/9/8562/28897228731_ff4447ef5f_b.jpg", thumbnail: "https://c4.staticflickr.com/9/8562/28897228731_ff4447ef5f_n.jpg", thumbnailWidth: 320, thumbnailHeight: 194, caption: "Old Barn (Tom Eversley - isorepublic.com)" }, { src: "https://c2.staticflickr.com/8/7577/28973580825_d8f541ba3f_b.jpg", thumbnail: "https://c2.staticflickr.com/8/7577/28973580825_d8f541ba3f_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Cosmos Flower Macro (Tom Eversley - isorepublic.com)" }, { src: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_n.jpg", thumbnailWidth: 271, thumbnailHeight: 320, caption: "Orange Macro (Tom Eversley - isorepublic.com)" }, { src: "https://c1.staticflickr.com/9/8330/28941240416_71d2a7af8e_b.jpg", thumbnail: "https://c1.staticflickr.com/9/8330/28941240416_71d2a7af8e_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Surfer Sunset (Tom Eversley - isorepublic.com)" }, { src: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_b.jpg", thumbnail: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Man on BMX (Tom Eversley - isorepublic.com)" }, { src: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_b.jpg", thumbnail: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Ropeman - Thailand (Tom Eversley - isorepublic.com)" }, { src: "https://c4.staticflickr.com/8/7476/28973628875_069e938525_b.jpg", thumbnail: "https://c4.staticflickr.com/8/7476/28973628875_069e938525_n.jpg", thumbnailWidth: 320, thumbnailHeight: 213, caption: "Time to Think (Tom Eversley - isorepublic.com)" }, { src: "https://c6.staticflickr.com/9/8593/28357129133_f04c73bf1e_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8593/28357129133_f04c73bf1e_n.jpg", thumbnailWidth: 320, thumbnailHeight: 179, caption: "Untitled (Jan Vasek - jeshoots.com)" }, { src: "https://c6.staticflickr.com/9/8893/28897116141_641b88e342_b.jpg", thumbnail: "https://c6.staticflickr.com/9/8893/28897116141_641b88e342_n.jpg", thumbnailWidth: 320, thumbnailHeight: 215, caption: "Untitled (moveast.me)" }, { src: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_b.jpg", thumbnail: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_n.jpg", thumbnailWidth: 257, thumbnailHeight: 320, caption: "A photo by 贝莉儿 NG. (unsplash.com)" }, { src: "https://c7.staticflickr.com/9/8824/28868764222_19f3b30773_b.jpg", thumbnail: "https://c7.staticflickr.com/9/8824/28868764222_19f3b30773_n.jpg", thumbnailWidth: 226, thumbnailHeight: 320, caption: "A photo by Matthew Wiebe. (unsplash.com)" } ]).splice(0,16) }; ReactDOM.render(<Demo0 />, document.getElementById('demo0'));