CannerCMS / image-gallery

A gallery for photos.

Home Page:https://canner.github.io/image-gallery/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

canner-image-gallery NPM version Build Status Dependency Status Greenkeeper badge

A image gallery for CannerIO

demo

Installation

$ npm install --save canner-image-gallery

Usage

IMPORTANT NOTE: You need to import react-flexbox-grid's css in order to let it work correctly

Or add

  <link rel="stylesheet" type="text/css" href="https://unpkg.com/react-flexbox-grid@2.1.2/dist/react-flexbox-grid.css"/>

into your HTML.

import Gallery from 'canner-image-gallery';

class Demo extends React.Component {
  render() {
    return (
      <Gallery
        value={[
          'https://images.unsplash.com/photo-1494005612480-90f50fd9376f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=36d7fc577cf6a4527cbee851db481b8c&auto=format&fit=crop&w=3153&q=80',
          'https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=add00823c6d712c149aa86c82f02c21e&auto=format&fit=crop&w=3151&q=80',
          'https://images.unsplash.com/photo-1506241537529-eefea1fbe44d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7c743141b38a2afe4a8ec4d77c889ef3&auto=format&fit=crop&w=3150&q=80'
        ]}
        renderContent={(i) => <div>content {i}</div>}
        contentTitle={"Content title"}
        onDelete={(i) => console.log(i)}
        onCreate={(item) => console.log(item)}
        onSwap={(from, to) => console.log(from, to)}
        serviceConfig={new ImgurService({
          mashapeKey: '<mashapeKey>',
          clientId: '<clientId>'
        })}
      />
    );
  }
}

Props

Name Type Default Description
value Array<string> undefined Array of your photo's url
disableDrag boolean false Whether gallery is draggable
renderContent (index: number) => React.Element<*> undefined If this is defined, a edit button will rendered in each photo
contentTitle string? undefined The popup content's title
onDelete (index: number) => void undefined Called when the photo is deleted
onCreate ({index: number, image: string} or Array<{index: number, image: string}>) => void undefined Called when the photo is created
onSwap ({fromIndex: number, toIndex: number}) => void undefined Called when the photo is swapped
serviceConfig depends on services undefined pass image configurations generate from: https://github.com/Canner/image-service-config

Start example server

npm start

generate demo

npm run gh-pages

License

MIT © Canner

About

A gallery for photos.

https://canner.github.io/image-gallery/

License:MIT License


Languages

Language:JavaScript 100.0%