React Gallery Designer

Installation

yarn

$ yarn add react-gallery-designer

npm

$ npm install react-gallery-designer

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-gallery-designer/umd/react-gallery-designer.min.js"></script>

If you use the UMD build you can find the library on window.__RGD.

Demos

Props

images (required)

type: array
description: Array of objects representing the props for each image. This library uses react-image-designer for each image (and thumbnail) in the gallery. In addition to the props from react-image-designer, you may also define the following:

- link

default: ""
type: string
description: Url to link image.

- target

default: false
type: boolean
description: add target="_blank" rel="noopener noreferrer" to the a tag.

- index

default: 0
type: number
description: Index of image in array. Array will be sorted to user defined order if index is provided.

- caption

default: ""
type: string
description: Caption for image.

additionally the following props are not modifiable on the image object because they are either taken care of at the global level, or are handled by react-gallery-designer internally (and changing that would break it):

id
className
contain
tag

settings

- lightbox

default: false
type: boolean
description: Displays all images in a row wrap flex-box, and expands an image to full screen on click with "next", and "prev" controls. Returns to previous view state on click when expanded.

- inview

default: 1
type: number
description: Number of images visible on screen at one time.

- auto

default: false
type: boolean
description: If slide should start rotating right away.

- noImages

default: false
type: boolean
description: Useful for a rotating rss feed or similar application.

- direction

default: "left"
type: string
description: Direction in which the gallery should rotate. Options include "left", "right", "up", "down".

- orientation

default: "horizontal"
type: string
description: Orient gallery vertically or horizontally.

- animation

default: "slide"
type: string
description: Type of animation for gallery. Options include "slide", "carousel", "book", "flip", "fade".

- speed

default: 2000
type: number
description: How much time (in milliseconds) each image will remain in place.

- timingfn

default: "ease-in-out"
type: string
description: css timing function for transitions.

- transitionspeed

default: 0.25
type: number
description: How fast the transitions are.

- playpause

default: false
type: boolean
description: Puts a play/pause button in the top left (while mouse is over gallery container).

- pauseonhover

default: false
type: boolean
description: If the gallery should pause while hovering.

- arrows

default: false
type: boolean
description: Puts arrow on the left and right of the gallery container (while mouse is over gallery container).

- advance

default: 1
type: number
description: How many images the gallery should advance every interval.

- startposition

default: "center"
type: string
description: Position of the first image in the gallery relative to other images in view. Options include "left", "right", "center".

- showcaptions

default: false
type: boolean
description: If caption prop is supplied for each image, display caption over image.

- linkslides

default: false
type: boolean
description: If link prop is supplied for each image, make image a clickable link.

- thumbnails

default: false
type: boolean
description: Displays thumbnails under gallery container. Brings corresponding image into view on click.

- contain

default: false
type: boolean
description: Sets background-size of image to contain.

- playIcon

default: "▶"
type: string
description: HTML to use for play button.

- pauseIcon

default: "⏸"
type: string
description: HTML to use for pause button.

- nextIcon

default: "›"
type: string
description: HTML to use for next button.

- prevIcon

default: "‹"
type: string
description: HTML to use for prev button.

- tag

default: "div"
type: string
description: Tag to use for images. Will use src if img is used. Else images will render as background-image.

- imagePercentHigh

default: thumbnails ? 80 : 100
type: number
description: Percent of the height of the gallery container to use as the height of each image.

- thumbPercentHigh

default: thumbnails ? 15 : 0
type: number
description: Percent of the height of the gallery container to use as the height of each thumbnail.

- lbSmallPercentHigh

default: 30
type: number
description: Percent of the height of the gallery container to use as the height of each small lightbox image.

style

description: Style for to the gallery container.

thumbnailStyle

description: Style for to the thumbnails.

imgStyle

description: Style for to the images.

captionStyle

description: Style for to the captions.

lightboxStyle

description: Style for to full screen images when in lightbox mode.

controlStyle

description: Style for to the play/pause and next/prev buttons.

className

description: Class for the gallery container.

id

description: Id for the gallery container.

imgClass

description: Class for gallery images.

captionClass

description: Class for image captions.

thumbnailClass

description: Class for thumbnail images.

controlClass

description: Class for the play/pause and next/prev buttons.

examples

commonjs

import Gallery from "react-gallery-designer";

const ids = [15, 20, 25, 30, 35, 40, 45, 50 , 55, 145, 150];

const images = ids.map((id, i) => ({
  src: `/imgs/IMG_${id}-1900.jpg`,
  placeholder: `/imgs/IMG_${id}-100.jpg`,
  srcset: `/imgs/IMG_${id}-1900.jpg 1900w,
          /imgs/IMG_${id}-1200.jpg 1200w,
          /imgs/IMG_${id}-768.jpg 768w,
          /imgs/IMG_${id}-480.jpg 480w,
          /imgs/IMG_${id}-300.jpg 300w`,
  sizes: `(max-width: 320px) 320w,
          (max-width: 480px) 480w,
          (max-width: 768px) 768w,
          (max-width: 1200px) 1200w,
          1900px`,
  link: `https://link-${id}.com`,
  target: true,
  index: i,
  caption: `super cool caption ${i}`,
  style: {borderRight: "red solid 10px"},
  repeat: true,
  position: "bottom right",
  children: "... some more children here ...",
  alt: "SOOPERKEWLIMGOMG",
  timeout: 500
}));

const settings = {
  lightbox: false,
  inview: 5,
  auto: true,
  noImages: false,
  direction: "right",
  orientation: "horizontal",
  animation: "carousel",
  speed: 3500,
  timingfn: "linear",
  transitionspeed: 0.333333,
  playpause: true,
  pauseonhover: true,
  arrows: true,
  advance: 2,
  startposition: "right",
  showcaptions: true,
  linkslides: true,
  thumbnails: true,
  contain: true,
  playIcon: "PLAY",
  pauseIcon: "PAUSE",
  nextIcon: "NEXT",
  prevIcon: "PREV",
  tag: "figure"
};

const SuperCoolGallery = props => (
  <Gallery
    {...props}
    settings={settings}
    images={images}
  />
)

umd

_{see ./examples/umdLightbox.html}

<div id="react-gallery"></div>
<script>
  var ids = [
    15,
    20,
    25,
    30,
    35,
    40,
    45,
    50,
    55,
    60,
    65,
    70,
    75,
    80,
    85,
    90,
    95,
    125,
    130,
    135,
    140,
    145,
    150,
    155,
    160,
    165,
    170,
    175,
    180,
    190,
    195,
    200
  ];

  var imgs = ids.map(function(id, i) {
    return {
        src: `/imgs/IMG_${id}-1900.jpg`,
        placeholder: `/imgs/IMG_${id}-100.jpg`,
        srcset: `/imgs/IMG_${id}-1900.jpg 1900w,
                /imgs/IMG_${id}-1200.jpg 1200w,
                /imgs/IMG_${id}-768.jpg 768w,
                /imgs/IMG_${id}-480.jpg 480w,
                /imgs/IMG_${id}-300.jpg 300w`,
        sizes: `(max-width: 320px) 320w,
                (max-width: 480px) 480w,
                (max-width: 768px) 768w,
                (max-width: 1200px) 1200w,
                1900px`
      }
    });

  var settings = {
    lightbox: true
  };

  return __RGD({
    images: imgs,
    settings: settings,
    style: {
      width: "600px",
      maxWidth: "95%",
      margin: "0 auto"
    },
    domId: "react-gallery"
  })

</script>

Try Things Live

To test the options, git clone this repo, put some images in the 'imgs' directory, or grab them from whatever remote resource, and set-up your configuration. Then run yarn start ./relative/path/from/src/to/configuration or npm run start ./relative/path/from/src/to/configuration.

There are examples provided. To run them locally, execute yarn start ../examples/gallery-example or npm run start ../examples/gallery-example.

image credits

Thanks to my lovely wife Norah @ Fox & Folk for the images for the examples.

Contributing

clone, install, tinker, submit pr. Thanks!

react-gallery-designer