Angular Galleria

Angular Galleria is an advanced content gallery component.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {GalleriaModule} from 'primeng/galleria';

Getting Started

Galleria requires item template and a value as an array of objects

<p-galleria [value]="images">
    <ng-template pTemplate="item" let-item>
        <img [src]="item.previewImageSrc" [alt]="item.alt" />
    </ng-template>
</p-galleria>

For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.

{
    "data":[
        {
            "previewImageSrc": "demo/images/galleria/galleria1.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
            "alt": "Description for Image 1",
            "title": "Title 1"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria2.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
            "alt": "Description for Image 2",
            "title": "Title 2"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria3.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
            "alt": "Description for Image 3",
            "title": "Title 3"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria4.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
            "alt": "Description for Image 4",
            "title": "Title 4"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria5.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
            "alt": "Description for Image 5",
            "title": "Title 5"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria6.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
            "alt": "Description for Image 6",
            "title": "Title 6"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria7.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
            "alt": "Description for Image 7",
            "title": "Title 7"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria8.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
            "alt": "Description for Image 8",
            "title": "Title 8"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria9.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
            "alt": "Description for Image 9",
            "title": "Title 9"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria10.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
            "alt": "Description for Image 10",
            "title": "Title 10"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria11.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
            "alt": "Description for Image 11",
            "title": "Title 11"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria12.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
            "alt": "Description for Image 12",
            "title": "Title 12"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria13.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
            "alt": "Description for Image 13",
            "title": "Title 13"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria14.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
            "alt": "Description for Image 14",
            "title": "Title 14"
        },
        {
            "previewImageSrc": "demo/images/galleria/galleria15.jpg",
            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
            "alt": "Description for Image 15",
            "title": "Title 15"
        }
    ]
}

@Injectable()
export class PhotoService {

    constructor(private http: HttpClient) { }

    getImages() {
    return this.http.get<any>('assets/showcase/data/photos.json')
      .toPromise()
      .then(res => <Image[]>res.data)
      .then(data => { return data; });
    }
}

export class GalleriaDemo implements OnInit {

    images: any[];

    constructor(private photoService: PhotoService) { }

    responsiveOptions:any[] = [
        {
            breakpoint: '1024px',
            numVisible: 5
        },
        {
            breakpoint: '768px',
            numVisible: 3
        },
        {
            breakpoint: '560px',
            numVisible: 1
        }
    ];
    ngOnInit() {
        this.photoService.getImages().then(images => this.images = images);
    }
}

Items per page

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

<p-galleria [value]="images" [numVisible]="5">
    <ng-template pTemplate="item" let-item>
        <img [src]="item.previewImageSrc" [alt]="item.alt" />
    </template>
    <ng-template pTemplate="thumbnail" let-item>
        <div class="p-grid p-nogutter p-justify-center">
            <img [src]="item.thumbnailImageSrc" />
        </div>
    </ng-template>
</p-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.

<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [numVisible]="5"> 
    <ng-template pTemplate="item" let-item>
        <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>
    </ng-template>
    <ng-template pTemplate="thumbnail" let-item>
        <div class="p-grid p-nogutter p-justify-center">
            <img [src]="item.thumbnailImageSrc" style="display: block;"/>
        </div>
    </ng-template>
</p-galleria>

responsiveOptions:any[] = [    {        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.

<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '520px'" [numVisible]="5"> 
    <ng-template pTemplate="header">
        <h1>
            Header
        </h1>
    </ng-template>
    <ng-template pTemplate="item" let-item>
        <img [src]="item.previewImageSrc" style="width: 100%;" />
    </ng-template>
    <ng-template pTemplate="thumbnail" let-item>
        <div class="p-grid p-nogutter p-justify-center">
            <img [src]="item.thumbnailImageSrc" />
        </div>
    </ng-template>
    <ng-template pTemplate="header">
        <h1>
            Footer
        </h1>
    </ng-template>
</p-galleria>

Indicators

Indicators allow quick navigation between the items. Set showIndicators to display indicators which can be customized further with the changeItemOnIndicatorHover, showIndicatorsOnItem and indicatorsPosition properties.

<p-galleria [value]="images" [indicators]="true">
    <ng-template pTemplate="item" let-item>
        <img [src]="item.previewImageSrc" [alt]="item.alt" />
    </template>
</p-galleria>

Theming

Galleria supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Galleria showcase for demos and documentation.