Displaying a collection of images with Galleria

The Galleria component can be used to display a collection of images with a transition effect.

Get it up and running

A collection of images is created programmatically--it is an array of objects with the following three attributes:

• source: The path of the image
• title: The title text in the caption section
• alt: A description in the caption section below the title

Let's create a GalleriaComponent class:

class GalleriaComponent {
  images: any[];

  ngOnInit() {
    this.images = [];

    this.images.push({
      source: '/assets/data/images/cars/Yeni.png',
      alt: 'This is a first car',
      title: 'Yeni Vollkswagen CC'
    });
    this.images.push({
      source: '/assets/data/images/cars/Golf.png',
      alt: 'This is a second car',
      title: 'Golf'
    });

    ... // more image definitions
  }
}

In the HTML code, the collection is referenced via the input property images:

<p-galleria [images]="images" panelWidth="400" panelHeight="320"
...