NgxGallery

A simple native gallery component for Angular 8+ and 13+.

Demo

Demo is here demo

Working code for this demo at stackblitz example

Getting Started

Installation

Install via npm package manager

npm install @kolkov/ngx-gallery --save

Versions

2.x.x and above - for Angular v13+ 1.x.x and above - for Angular v8+

Usage

Import ngx-gallery module

import { HttpClientModule} from '@angular/common/http';
import { NgxGalleryModule } from '@kolkov/ngx-gallery';

@NgModule({
  imports: [ HttpClientModule, NgxGalleryModule ]
})

Then in HTML

<ngx-gallery [options]="galleryOptions" [images]="galleryImages" class="ngx-gallery"></ngx-gallery>

where

import {Component, OnInit} from '@angular/core';
import {NgxGalleryOptions} from '@kolkov/ngx-gallery';
import {NgxGalleryImage} from '@kolkov/ngx-gallery';
import {NgxGalleryAnimation} from '@kolkov/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,
        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'
      },
      {
        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'
      },
      {
        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

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

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, NgxGallery is maintained under the Semantic Versioning guidelines.

See the Releases section of our project for changelogs for each release version.

Creators

Andrey Kolkov

• https://github.com/kolkov

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

Donate

If you like my work, and I save your time you can buy me a 🍺 or 🍕