Multimedia - Galleria - 《PrimeNG Document》

Documentation
Source

GalleriaGalleria is a content gallery component.

Documentation

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.

Source

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'});
    }
}