Galleria Galleria is a content gallery component.

Import


import {GalleriaModule} from 'primeng/galleria';

Getting Started

Galleria requires a set of images to display. Source attribute defines the path of the image whereas title and alt attributes are used in the caption section to display summary and description about an image.


<p-galleria [images]="images" panelWidth="500" panelHeight="313" [showCaption]="true"></p-galleria>


export class GalleriaDemo implements OnInit {
    
    images: any[];
    
    ngOnInit() {
        this.images = [];
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria1.jpg', alt:'Description for Image 1', title:'Title 1'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria2.jpg', alt:'Description for Image 2', title:'Title 2'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria3.jpg', alt:'Description for Image 3', title:'Title 3'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria4.jpg', alt:'Description for Image 4', title:'Title 4'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria5.jpg', alt:'Description for Image 5', title:'Title 5'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria6.jpg', alt:'Description for Image 6', title:'Title 6'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria7.jpg', alt:'Description for Image 7', title:'Title 7'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria8.jpg', alt:'Description for Image 8', title:'Title 8'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria9.jpg', alt:'Description for Image 9', title:'Title 9'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria10.jpg', alt:'Description for Image 10', title:'Title 10'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria11.jpg', alt:'Description for Image 11', title:'Title 11'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria12.jpg', alt:'Description for Image 12', title:'Title 12'});
    }
}

Properties

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.
effectDuration number 250 Duration of animation in milliseconds.
showCaption boolean true Displays information retrieved from title and alt attributes of images in content caption.
activeIndex number 0 Index of the current active image of galleria images.

Events

Name Parameters Description
onImageClicked event.image: Image Object
event.originalEvent: Click Object
event.index: Index of the image
Callback to invoke when the displayed image is clicked.
onImageChange event.index: Index of the image Callback to invoke when an image changes.

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-galleria-filmstrip-wrapper Container of filmstrip.
ui-galleria-filmstrip Filmstrip element
ui-galleria-frame Frame element of thumbnail
ui-galleria-nav-next Icon to navigate to next item
ui-galleria-nav-prev Icon to navigate to previous item
ui-galleria-caption Caption element that displays title and description of an item

Dependencies

None.

View on GitHub

<p-galleria [images]="images" panelWidth="500" panelHeight="313" showCaption="true"></p-galleria>


export class GalleriaDemo implements OnInit {
    
    images: any[];
    
    ngOnInit() {
        this.images = [];
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria1.jpg', alt:'Description for Image 1', title:'Title 1'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria2.jpg', alt:'Description for Image 2', title:'Title 2'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria3.jpg', alt:'Description for Image 3', title:'Title 3'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria4.jpg', alt:'Description for Image 4', title:'Title 4'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria5.jpg', alt:'Description for Image 5', title:'Title 5'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria6.jpg', alt:'Description for Image 6', title:'Title 6'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria7.jpg', alt:'Description for Image 7', title:'Title 7'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria8.jpg', alt:'Description for Image 8', title:'Title 8'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria9.jpg', alt:'Description for Image 9', title:'Title 9'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria10.jpg', alt:'Description for Image 10', title:'Title 10'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria11.jpg', alt:'Description for Image 11', title:'Title 11'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria12.jpg', alt:'Description for Image 12', title:'Title 12'});
    }
}