Getting Started

This library consists of 2 packages:

• ng-gallery: This package includes a <gallery> component and a gallery service.
• ng-gallery/lightbox: Within this package, you'll find a lightbox service and a [lightbox] directive, designed to facilitate the opening of the gallery within a modal window. Additionally, this package offers a [gallerize] directive, which seamlessly integrates the images into the lightbox.

Installation

The package can be installed alongside the @angular/cdk dependency using NPM. To do this, run the following command in your terminal:

npm i ng-gallery@beta @angular/cdk
Copy

Usage

The GalleryModule can be imported either globally in your application configuration or directly in your component imports. It's important to note that importing the provideAnimations animation is required for the proper functioning of the gallery component. Below is an example of setting up your Angular application:

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { GalleryModule } from 'ng-gallery';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    importProvidersFrom(GalleryModule)
  ]
};
Copy

Provide default options

DEFAULT_GALLERY_CONFIG Injection token that can be used to provide the default options for the gallery.

Example

import { ApplicationConfig } from '@angular/core';
import { DEFAULT_GALLERY_CONFIG, GalleryConfig } from 'ng-gallery';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: DEFAULT_GALLERY_CONFIG,
      useValue: {
        imageSize: 'cover'
      } as GalleryConfig
    }
  ]
};
Copy

Mouse Sliding (optional)

The gallery relies on HammerJS to support dragging the slider using the mouse, if you don't want this feature you can skip installing HammerJS.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

To install via npm, use the following command:

NPM

npm i hammerjs
Copy

After installing, import it in main.ts

import 'hammerjs';
Copy

Issues

If you identify any errors in this module or have an idea for an improvement, please open an issue.