sjgallery

A responsive React carousel/grid gallery with lightbox functionality that supports images and standard HTML elements.

Installation

npm i sjgallery or npm install sjgallery

Import

import SJGallery from 'sjgallery';

Basic Usage

const App = () => { return ( <SJGallery items={[ { src: 'image1.jpg', alt: 'Image 1' }, { src: 'image2.jpg', alt: 'Image 2' }, ]} // Additional props can be set here /> ); };

Configuration Options

Here's a full list of props you can pass to sjgallery:

• items: (Array) Image url and caption objects or HTML elements. This is the only mandatory prop.
• imageGallery: (Bool) If the gallery will be displaying images or HTML elements. Default value is true. Set to false to show HTML elements.
• layout: (String) Layout of the gallery, defaults to grid. Accepts grid and carousel.
• zIndexElements: (Array) This prop is used for the lightbox z-index, indicate the elements you want to remove z-index when the lightbox is open. Default value is empty.
• navText: (Array) Set gallery navigation text. Accepts two Strings or HTML elements. Defaults to ['←', '→'].
• lightboxNavText: (Array) Set lightbox navigation text. Accepts three Strings or HTML elements. Defaults to ['←', '→', '×'].
• colors: (Array) Used to define the several colors and effects of the gallery. All the available props below:
• • lightboxBackground: (String) Defines the background of the lightbox. Defaults to 'rgba(0, 0, 0, 0.9)'.
• • captionBackground: (String) Defines the background of the image captions. Defaults to 'rgba(0, 0, 0, 0.5)'.
• • captionColor: (String) Defines the color of the image captions. Defaults to '#fafafa'.
• • navColor: (String) Defines the color of the gallery navigation. Defaults to '#fafafa'.
• • navBackground: (String) Defines the background of the gallery navigation. Defaults to 'rgba(0, 0, 0, 0.5)'.
• • navColorHover: (String) Defines the color of the gallery navigation when hovered. Defaults to '#fafafa'.
• • navBackgroundHover: (String) Defines the background of the gallery navigation when hovered. Defaults to 'rgba(0, 0, 0, 1)'.
• • lightboxNavColor: (String) Defines the color of the lightbox navigation. Defaults to '#fafafa'.
• • lightboxNavColor: (String) Defines the color of the lightbox navigation when hovered. Defaults to '#ccc'.
• • dotColor: (String) Defines the color of the gallery dots. Defaults to '#ccc'.
• • dotActiveColor: (String) Defines the color of the gallery dots when hovered or active. Defaults to '#333'.
• • inactiveThumbnailsBorder: (String) Defines the border of the lightbox thumbnails. Defaults to '2px solid transparent'.
• • inactiveThumbnailsBorder: (String) Defines the image filter of the gallery thumbnails. Defaults to 'grayscale(1)'.
• • activeThumbnailBorder: (String) Defines the border of the lightbox thumbnails when hovered or active. Defaults to '2px solid #fafafa'.
• • activeThumbnailFilter: (String) Defines the image filter of the gallery thumbnails when hovered or active. Defaults to 'grayscale(0)'.
• • openLightboxButtonColor: (String) Defines the color of the open lightbox button. Defaults to '#fafafa'.
• • openLightboxButtonBackground: (String) Defines the background of the open lightbox button. Defaults to 'rgba(0, 0, 0, 1)'.
• responsive: (Array) Used to define several gallery attributes depending on the viewport size. Each element of the array should be an object. All the available props below:
• • viewportSize: (Int) Defines the respective viewport size.
• • numVisible: (Int) Defines the number of visible of the carousel items on that viewport.
• • itemsPerDot: (Int) Defines the number of items each carousel dot contains on that viewport.
• • gridLayout: (Array) Defines the size [columns, rows] of each item on the grid on that viewport. Example [[1, 2], [2, 1], [1, 2], [2, 1], [2, 1], [2, 1], [1, 2], [1, 2], [2, 1], [2, 1]]. If the gallery has more that the specified items, it will loop through the sizes. In the example, the 11th item will get the size of position 0 [1, 2], the 12th item will get the size of position 1 [2, 1], etc. Empty array means every item gets [1, 1] size.
• • galleryHeight: (String) Defines the size of carousel items or grid rows on that viewport.
• • nav: (Bool) Defines if the carousel nav is visible on that viewport.
• • dots: (Bool) Defines if the carousel dots are visible on that viewport.
• • lightbox: (Bool) Defines if the listbox is visible on that viewport.
• • lightboxNav: (Bool) Defines if the lightbox nav is visible on that viewport.
• • lightboxThumbnails: (Bool) Defines if the lightbox thumbnails are visible on that viewport.
• • onlyLightbox: (Bool) Defines if only the lightbox is visible on that viewport. In case this prop is true, a button will be shown, clicking it will open the lightbox. This prop only works if items are images.
• • openLightboxButtonText: (String) Defines the text of the open lightbox button on that viewport. Defaults to 'Gallery'.
• • • Responsive defaults to const responsive = [ { viewportSize: 992, numVisible: 3, itemsPerDot: 3, gridLayout: [], galleryHeight: '100svh', nav: true, dots: true, lightbox: true, lightboxNav: true, lightboxThumbnails: true, onlyLightbox: false, openLightboxButtonText: 'Gallery' }, { viewportSize: 768, numVisible: 2, itemsPerDot: 2, gridLayout: [], galleryHeight: '100svh', nav: true, dots: true, lightbox: true, lightboxNav: true, lightboxThumbnails: true, onlyLightbox: false, openLightboxButtonText: 'Gallery' }, { viewportSize: 0, numVisible: 1, itemsPerDot: 1, gridLayout: [], galleryHeight: '100svh', nav: true, dots: true, lightbox: true, lightboxNav: true, lightboxThumbnails: true, onlyLightbox: false, openLightboxButtonText: 'Gallery' }, ];

License

This project is licensed under the ISC License - see the [LICENSE] file for details.

Acknowledgments

Thank you to all the contributors and open-source libraries that made this possible.