Giter VIP home page Giter VIP logo

react-photo-gallery's Introduction

React Responsive Photo Gallery

Join the chat at https://gitter.im/react-photo-gallery/Lobby

CircleCI branch

A stateless responsive React photo gallery component that maintains the original aspect ratio of your photos and scales them responsively. Add your own routing, lightbox, and manage your own state.

Installation

To install:

npm install --save react-photo-gallery

Demo

http://neptunian.github.io/react-photo-gallery/

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Use

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

export default class Sample extends React.Component {
    render() {
	return (
	    <Gallery photos={PHOTO_SET} onClickPhoto={this.openLightbox}/>
	);
    }
}
const PHOTO_SET = [
  {
    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',
    ],
    sizes:[
      '(min-width: 480px) 50vw',
      '(min-width: 1024px) 33.3vw',
      '100vw'
    ],
    width: 681,
    height: 1024,
    alt: 'image 1',
  },
  {
    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',
    ],
    sizes:[
      '(min-width: 480px) 50vw',
      '(min-width: 1024px) 33.3vw',
      '100vw'
    ],
    width: 600,
    height: 600,
    alt: 'image 2',
  }
];

Gallery properties

Property Type Default Description
photos array undefined required; array of objects
cols number 3 optional; number of photos per row
onClickPhoto function function optional; do something when the user clicks a photo
margin number 2 optional; number of margin pixels around each entire image

Gallery.photos properties

Property Type Default Description
src string undefined required; the img src attribute value of the gallery image
srcset string undefined optional; the img srcset attribute value of the gallery image
sizes string undefined optional; the img sizes attribute value of the gallery image
width number undefined required; original width of the gallery image (only used for calculating aspect ratio)
height number undefined required; original height of the gallery image (only used for calculating aspect ratio)
alt string undefined optional; alt text of the gallery image

Demo explanation

This component uses React Images for lightbox functionality in the example demo, but the component itself does not depend on it. PHOTO_SET obj in the example above is also being passed to lightbox which uses src, srcset, and caption props.

To gain a good understanding of 'srcset' and 'sizes' attributes, I found this site very helpful: https://ericportis.com/posts/2014/srcset-sizes/.

react-photo-gallery's People

Contributors

neptunian avatar brianrc avatar hedleysmith avatar imerica avatar infacq avatar gitter-badger avatar timiscoding avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.