Galleria Galleria is a content gallery component.

Basic

Custom Content

Import

import {Galleria} from 'primeng/primeng';

Getting Started

Galleria requires a set of images inside list items as the content. Alt and Title attributes are used in the caption section.

<p-galleria panelWidth="500" panelHeight="313">
    <ul>
        <li><img src="showcase/resources/demo/images/galleria/galleria1.png" alt="Description" title="Image Title"/></li>
        <li><img src="showcaseresources/demo/images/galleria/galleria2.png" alt="Description" title="Image Title"/></li>
        <li><img src="showcaseresources/demo/images/galleria/galleria3.png" alt="Description" title="Image Title"/></li>
    </ul>
</p-galleria>

If the images are dynamic, ngFor can be used to display the list dynamically.

<p-galleria panelWidth="500" panelHeight="313">
    <ul>
        <li *ngFor="#image of images;#i = index;">
            <img src="resources/demo/images/galleria/{{image}}" alt="Description for Image {{i}}" title="Image {{i}}"/>
        </li>
    </ul>
</p-galleria>
export class Model {
    images: string[] = ['galleria1.jpg', 'galleria2.jpg', 'galleria3.jpg', 'galleria4.jpg', 'galleria5.jpg', 'galleria6.jpg', 
                    'galleria7.jpg', 'galleria8.jpg', 'galleria9.jpg', 'galleria10.jpg', 'galleria11.jpg', 'galleria12.jpg'];
}
    

Custom Content

Galleria supports custom content display instead of images, in this case enable customContent option and place your content inside a div element next to the image.

<p-galleria panelWidth="500" panelHeight="313" customContent="customContent" [showCaption]="false">
    <ul>
        <li *ngFor="#image of images;#i = index;">
            <img src="resources/demo/images/galleria/{{image}}" />
            <div>
                <!-- Content Here -->
                <h2>Content For Item {{i}}</h2>
            </div>
        </li>
    </ul>
</p-galleria>

Attributes

Name Type Default Description
panelWidth number 600 Width of the content panel.
panelHeight number 400 Height of the content panel.
frameWidth number 60 Width of the filmstrip frames.
frameHeight number 40 Height of the filmstrip frames.
showFilmstrip boolean true Defines visibility of filmstrip.
autoPlay boolean true Images are displayed with a slideshow in autoPlay mode.
transitionInterval number 4000 Time in milliseconds between each slide in autoPlay mode.
effect string fade Name of animation to use on transitions.
effectDuration number 250 Duration of animation in milliseconds.
showCaption boolean true Displays information retrieved from title and alt attributes of images in content caption.
customContent boolean false In custom content mode, galleria displays content next to the image element instead of the image itself.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-galleria Container element
ui-galleria-panel-wrapper Parent of item containers.
ui-fieldset-legend Container of an item.
ui-fieldset-filmstrip-wrapper Container of filmstrip.
ui-fieldset-filmstrip Filmstrip element
ui-fieldset-frame Frame element of thumbnail
ui-fieldset-nav-next Icon to navigate to next item
ui-fieldset-nav-prev Icon to navigate to previous item
ui-fieldset-caption Caption element that displays title and description of an item

Dependencies

jQuery, jQuery UI WidgetFactory API, PrimeUI Galleria.

<h3 class="first">Basic</h3>
<p-galleria panelWidth="500" panelHeight="313">
    <ul>
        <li *ngFor="#image of images;#i = index;">
            <img src="showcase/resources/demo/images/galleria/{{image}}" alt="Description for Image {{i}}" title="Image {{i}}"/>
        </li>
    </ul>
</p-galleria>

<h3>Custom Content</h3>
<p-galleria panelWidth="500" panelHeight="313" customContent="customContent" [showCaption]="false">
    <ul>
        <li *ngFor="#image of images;#i = index;">
            <img src="showcase/resources/demo/images/galleria/{{image}}" />
            <div>
                <h2>Content For Item {{i}}</h2>
            </div>
        </li>
    </ul>
</p-galleria>
export class GalleriaDemo {

    images: string[] = ['galleria1.jpg', 'galleria2.jpg', 'galleria3.jpg', 'galleria4.jpg', 'galleria5.jpg', 'galleria6.jpg', 'galleria7.jpg', 'galleria8.jpg',
        'galleria9.jpg', 'galleria10.jpg', 'galleria11.jpg', 'galleria12.jpg'];
}