Galleria

Galleria is a content gallery component.

Import via Module


import { Galleria } from 'primereact/galleria';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/galleria/galleria.min.js"></script>

Getting Started

Galleria requires a value as an array of objects and can either be used as a Controlled or Uncontrolled component.


<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}></Galleria>


const itemTemplate = (item) => {
    // custom item content
}

const thumbnailTemplate = (item) => {
    // custom thumbnail content
}

Items per page

Number of items per page is defined using the numVisible property.


<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}
    numVisible={5}></Galleria>

Responsive

For responsive design, numVisible can be defined using the responsiveOptions property that should be an array of objects whose breakpoint defines the max-width to apply the settings.


<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}
    numVisible={5} responsiveOptions={responsiveOptions}></Galleria>


const responsiveOptions = [
    {
        breakpoint: '1024px',
        numVisible: 5
    },
    {
        breakpoint: '768px',
        numVisible: 3
    },
    {
        breakpoint: '560px',
        numVisible: 1
    }
];

Header and Footer

Custom content projection is available using the header and footer properties.


<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}
    header={<h1>Header</h1>}></Galleria>

Controlled vs Uncontrolled

In controlled mode, activeIndex and onItemChange properties need to be defined to control the first visible item.


<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}
    activeIndex={activeIndex} onItemChange={(e) => setActiveIndex(e.index)}></Galleria>

Uncontrolled

In uncontrolled mode, no additional properties are required. Initial item can be provided using the activeItemIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the first visible item index, prefer to use the component as controlled.


<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}></Galleria>

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
value	array	null	An array of objects to display.
activeIndex	number	0	Index of the first item.
header	any	null	Label of header.
footer	any	null	Label of footer.
style	string	null	Inline style of the component.
className	string	null	Style class of the component.
item	function	null	Function that gets an item in the value and returns the content for preview item.
thumbnail	function	null	Function that gets an item in the value and returns the content for thumbnail item.
indicator	function	null	Function that gets an item in the value and returns the content for indicator item.
caption	function	null	Function that gets an item in the value and returns the content for caption item.
circular	boolean	false	Defines if scrolling would be infinite.
autoPlay	boolean	false	Items are displayed with a slideshow in autoPlay mode.
transitionInterval	number	4000	Time in milliseconds to scroll items.
numVisible	number	3	Number of items per page.
responsiveOptions	any	null	An array of options for responsive design.
thumbnailsPosition	string	bottom	Position of thumbnails. Valid values are "bottom", "top", "left" and "right".
indicatorsPosition	string	bottom	Position of indicators. Valid values are "bottom", "top", "left" and "right".
verticalThumbnailViewPortHeight	string	300px	Height of the viewport in vertical thumbnail.
showItemNavigators	boolean	false	Whether to display navigation buttons in item container.
showThumbnailNavigators	boolean	true	Whether to display navigation buttons in thumbnail container.
showThumbnails	boolean	true	Whether to display thumbnail container.
showIndicators	boolean	false	Whether to display indicator container.
showIndicatorsOnItem	boolean	false	When enabled, indicator container is displayed on item container.
showItemNavigatorsOnHover	boolean	false	Whether to display navigation buttons on item container's hover.
changeItemOnIndicatorHover	boolean	false	When enabled, item is changed on indicator item's hover.
fullScreen	boolean	false	Whether to display the component on fullscreen.
baseZIndex	number	0	Base zIndex value to use in layering.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

Events

Name	Parameters	Description
onItemChange	event.index = index of the new item.	Callback to invoke after changing item.
onShow	-	Callback to invoke when modal becomes visible.
onHide	-	Callback to invoke when modal becomes hidden.

Styling

Following is the list of structural style classes

Name	Element
p-galleria	Container element.
p-galleria-header	Header section.
p-galleria-footer	Footer section.
p-galleria-item-wrapper	Item wrapper element. It contains item container and indicators.
p-galleria-item-container	Container of the item wrapper. It contains navigation buttons, items and caption content.
p-galleria-indicators	Container of the indicators. It contains indicator items.
p-galleria-thumbnail-content	Thumbnail content element.
p-galleria-thumbnail-container	Container of the thumbnail content. It contains navigation buttons and thumbnail items.
p-galleria-caption	Content of the item caption.