NgxGallery

A simple native gallery component for Angular 8+ and 13+
With image error handler.

Important info

This package was forked from - @kolkov/ngx-gallery

What was changed

Added - <img (error)='errorHandler()'> error image handler to stop loader icon and show error image if needed
Added - defaultErrorImage option to pass default error image
Added - errorImage option to galleryImages array to specify image Url for each image if needed

Installation

Install via [npm][npm] package manager

npm install @manderlai/ngx-gallery --save

where

import {Component, OnInit} from '@angular/core';
import {NgxGalleryOptions} from '@manderlai/ngx-gallery';
import {NgxGalleryImage} from '@manderlai/ngx-gallery';
import {NgxGalleryAnimation} from '@manderlai/ngx-gallery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  constructor() { }

  ngOnInit() {
    this.galleryOptions = [
      {
        width: '600px',
        height: '400px',
        thumbnailsColumns: 4,
        defaultErrorImage: 'assets/img/missing-image.svg',
        imageAnimation: NgxGalleryAnimation.Slide
      },
      // max-width 800
      {
        breakpoint: 800,
        width: '100%',
        height: '600px',
        imagePercent: 80,
        thumbnailsPercent: 20,
        thumbnailsMargin: 20,
        thumbnailMargin: 20
      },
      // max-width 400
      {
        breakpoint: 400,
        preview: false
      }
    ];

    this.galleryImages = [
      {
        small: 'assets/img/gallery/1-small.jpeg',
        medium: 'assets/img/gallery/1-medium.jpeg',
        big: 'assets/img/gallery/1-big.jpeg',
        errorImage: 'assets/img/missing-image.svg',
      },
      {
        small: 'assets/img/gallery/2-small.jpeg',
        medium: 'assets/img/gallery/2-medium.jpeg',
        big: 'assets/img/gallery/2-big.jpeg'
      },
      {
        small: 'assets/img/gallery/3-small.jpeg',
        medium: 'assets/img/gallery/3-medium.jpeg',
        big: 'assets/img/gallery/3-big.jpeg'
      },{
        small: 'assets/img/gallery/4-small.jpeg',
        medium: 'assets/img/gallery/4-medium.jpeg',
        big: 'assets/img/gallery/4-big.jpeg',
        errorImage: 'assets/img/missing-image-2.svg',
      },
      {
        small: 'assets/img/gallery/5-small.jpeg',
        medium: 'assets/img/gallery/5-medium.jpeg',
        big: 'assets/img/gallery/5-big.jpeg'
      }
    ];
  }
}

add this class to app CSS .ngx-gallery { display: inline-block; margin-bottom: 20px; }

API

Inputs

Outputs

Methods

Name | Description | | ------------- | ------------- | | show(index: number): void | Shows image at index | | showNext(): void | Shows next image | | showPrev(): void | Shows prev image | | canShowNext(): boolean | Returns true if there is next image | | canShowPrev(): boolean | Returns true if there is prev image | | openPreview(index: number): void | Opens preview at index | | moveThumbnailsLeft(): void | Moves thumbnails to left | | moveThumbnailsRight(): void | Moves thumbnails to right | | canMoveThumbnailsLeft(): boolean | Returns true if you can move thumbnails to left | | canMoveThumbnailsRight(): boolean | Returns true if you can move thumbnails to right |

NgxGalleryOptions

Layout options

Image options

Thumbnails options

Preview options

Icons options

NgxGalleryImage

NgxGalleryAnimation

• Fade (default)
• Slide
• Rotate
• Zoom

NgxGalleryImageSize

• Cover (default)
• Contain

NgxGalleryLayout

• Top
• Bottom (default)

NgxGalleryOrder

• Column (default)
• Row
• Page

NgxGalleryAction

• icon | Type: string - icon for custom action
• disabled | Type: boolean | Default value: false - if the icon should be disabled
• titleText | Type: string | Default value: '' - text to set the title attribute to
• onClick | Type: (event: Event, index: number) => void - Output function to call when custom action icon is clicked

What's included

Within the download you'll find the following directories and files. You'll see something like this:

ngx-gallery/
└── projects/
    ├── gallery/
    └── gallery-app/

gallery/ - library

gallery-app/ - demo application

Credits

This library is being fully rewritten for next Angular versions from original abandoned library written by Łukasz Gałka. I maintained full compatibility with the original library at the api level. https://github.com/lukasz-galka/ngx-gallery

2.0.0 (2022-01-06)

• Update to Angular v13 and new Ivy package format

1.0.11 (2020-03-05)

• Need to add ngx-gallery class to CSS documentation #8
• Unable to get custom icons to work #6
• Mention about original lib #7

1.0.0 (2019-11-24)

• Initial release