Sjgallery NPM | npm.io

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 (

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

};

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' }, ];