Awesome

Ngx Simple Gallery

A simple gallery lib for Angular [18]. It displays all the images as thumbnails and makes it big, when clicked/tapped on it.

• mobile friendly
• lightweight
• use images from any source
• the gallery takes up as much space as you let it
• navigate forwards/backwards with keyboard arrows or touch/click on arrows in the showcase dialog
• loading spinner while loading
• you can define a thumbnail or leave it empty. It is recommended to provide it though, because of performance reasons.

Demo | Changelog

Installation

npm install --save ngx-simple-gallery @angular/cdk

add the following line to your global styles (by default "styles.(scss|css)") if it is not included yet:

@import '@angular/cdk/overlay-prebuilt.css';

Versioning

Usage

1. Import the gallery into your component

import { NgxSimpleGalleryComponent } from '@zolcsi/ngx-simple-gallery';

@Component({
  standalone: true,
  imports: [NgxSimpleGalleryComponent],
})
export class AppComponent {}

2. List the gallery items

import { GalleryItem } from '@zolcsi/ngx-simple-gallery';

@Component({...})
export class AppComponent {
  galleryItems: GalleryItem[] = [
    { 
      src: '/img/image1.jpg' 
    }, 
    {
      src: 'https://picsum.photos/id/237/2000/3000',
      thumbnail: 'https://picsum.photos/id/237/160/160',
  }]
}

3. Render the gallery with the items assembled previously

<ngx-simple-gallery [galleryItems]="galleryItems"></ngx-simple-gallery>

Parameters

Input parameters

With all the input parameters set:

<ngx-simple-gallery [galleryItems]="galleryItems" 
                    [thumbnailSize]="65"
                    emptyMessage="Please provide some images">  
</ngx-simple-gallery>