Photo gallery, example with public photos feed from Flickr, Yandex
Simple example of photo gallery with responsive image grid, columns customizing, one-column view with description, fullscreen preview with one click. Pure CSS for that.
You can use PhotoGrid in your app, just install it from npm
npm install react-photo-feed
import React from "react";
import ReactDOM from "react-dom";
import PhotoGrid from "react-photo-feed";
import "react-photo-feed/library/style.css";
const demoPhotos = [
{
id : 1, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
},
{
id : 2, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
},
{
id : 3, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
},
{
id : 4, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
},
{
id : 5, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
},
{
id : 6, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
},
{
id : 7, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
}
];
ReactDOM.render(
<div>
<PhotoGrid columns={3} photos={demoPhotos} />
</div>,
document.getElementById('root')
);| Property | Type | Required? | Description |
|---|---|---|---|
| photos | Array | ✓ | Array of objects, like [{id: 1, src: 'http://url_to_small_image', bigSrc: 'http://url_to_big_image', title: 'Caption of photo'}] |
| columns | Number | ✓ | Grid columns, like columns={1}, also can be 2,3,5 |
| InformationElement | Function | Component used for one-column view |
Also you can see toggle|radio button group.
<RadioButtonGroup items={sortParams} value={order} onClick={this.onSortClick.bind(this)} type="default"/>
Some ideas were inspired by react-rpg