React Gallery Designer

Installation

yarn

1$ yarn add react-gallery-designer

npm

1$ npm install react-gallery-designer

The UMD build is also available on unpkg:

1<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

lightbox

rotator

fade

rss

carousel

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

1import Gallery from "react-gallery-designer";
2
3const ids = [15, 20, 25, 30, 35, 40, 45, 50 , 55, 145, 150];
4
5const images = ids.map((id, i) => ({
6  src: `/imgs/IMG_${id}-1900.jpg`,
7  placeholder: `/imgs/IMG_${id}-100.jpg`,
8  srcset: `/imgs/IMG_${id}-1900.jpg 1900w,
9          /imgs/IMG_${id}-1200.jpg 1200w,
10          /imgs/IMG_${id}-768.jpg 768w,
11          /imgs/IMG_${id}-480.jpg 480w,
12          /imgs/IMG_${id}-300.jpg 300w`,
13  sizes: `(max-width: 320px) 320w,
14          (max-width: 480px) 480w,
15          (max-width: 768px) 768w,
16          (max-width: 1200px) 1200w,
17          1900px`,
18  link: `https://link-${id}.com`,
19  target: true,
20  index: i,
21  caption: `super cool caption ${i}`,
22  style: {borderRight: "red solid 10px"},
23  repeat: true,
24  position: "bottom right",
25  children: "... some more children here ...",
26  alt: "SOOPERKEWLIMGOMG",
27  timeout: 500
28}));
29
30const settings = {
31  lightbox: false,
32  inview: 5,
33  auto: true,
34  noImages: false,
35  direction: "right",
36  orientation: "horizontal",
37  animation: "carousel",
38  speed: 3500,
39  timingfn: "linear",
40  transitionspeed: 0.333333,
41  playpause: true,
42  pauseonhover: true,
43  arrows: true,
44  advance: 2,
45  startposition: "right",
46  showcaptions: true,
47  linkslides: true,
48  thumbnails: true,
49  contain: true,
50  playIcon: "PLAY",
51  pauseIcon: "PAUSE",
52  nextIcon: "NEXT",
53  prevIcon: "PREV",
54  tag: "figure"
55};
56
57const SuperCoolGallery = props => (
58  <Gallery
59    {...props}
60    settings={settings}
61    images={images}
62  />
63)

umd

_{see ./examples/umdLightbox.html}

1<div id="react-gallery"></div>
2<script>
3  var ids = [
4    15,
5    20,
6    25,
7    30,
8    35,
9    40,
10    45,
11    50,
12    55,
13    60,
14    65,
15    70,
16    75,
17    80,
18    85,
19    90,
20    95,
21    125,
22    130,
23    135,
24    140,
25    145,
26    150,
27    155,
28    160,
29    165,
30    170,
31    175,
32    180,
33    190,
34    195,
35    200
36  ];
37
38  var imgs = ids.map(function(id, i) {
39    return {
40        src: `/imgs/IMG_${id}-1900.jpg`,
41        placeholder: `/imgs/IMG_${id}-100.jpg`,
42        srcset: `/imgs/IMG_${id}-1900.jpg 1900w,
43                /imgs/IMG_${id}-1200.jpg 1200w,
44                /imgs/IMG_${id}-768.jpg 768w,
45                /imgs/IMG_${id}-480.jpg 480w,
46                /imgs/IMG_${id}-300.jpg 300w`,
47        sizes: `(max-width: 320px) 320w,
48                (max-width: 480px) 480w,
49                (max-width: 768px) 768w,
50                (max-width: 1200px) 1200w,
51                1900px`
52      }
53    });
54
55  var settings = {
56    lightbox: true
57  };
58
59  return __RGD({
60    images: imgs,
61    settings: settings,
62    style: {
63      width: "600px",
64      maxWidth: "95%",
65      margin: "0 auto"
66    },
67    domId: "react-gallery"
68  })
69
70</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!