react-gallery-designer
v1.4.5
Published
react component for creating image galleries, carousels, lightbox-like layouts and more
Downloads
2,242
Maintainers
Readme
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
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
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!