ng-gallery

Angular Image Gallery

Angular Image Gallery | live demo

Installation

Install it with npm

npm install --save ng-gallery

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ng-gallery:

map: {
  'ng-gallery': 'node_modules/ng-gallery/bundles/ng-gallery.umd.js',
}

Usage

Import GalleryModule and set the gallery configuration in your root module

import { GalleryModule } from 'ng-gallery';
  
  export const galleryConfig : GalleryConfig = {
    // ...
  }
  
  @NgModule({
   imports: [
      // ...
      GalleryModule.forRoot(galleryConfig)
   ]
  })

After that you will be able to use Gallery's components and there is two options:

• <gallery></gallery> : to insert the gallery right in the template, see basic example
• <gallery-modal></gallery-modal> : to open the gallery in a modal, see modal example

One final step is to fill the gallery with images and there is two options:

• Using GalleryService

constructor(private gallery: GalleryService) { }

ngOnInit() {
    this.gallery.load(images);
}

• Using [gallerize] directive

<div [gallerize] class="content">
    <img src="assets/img/img3.jpg" alt="Spring">
    <img src="assets/img/img4.jpg" alt="Fire">
    <img src="assets/img/img5.jpg" alt="Peacock">
</div>

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

Issues

If you identify any errors in this module, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!

License

Changelog

0.5.2 beta

• (feat) gestures support
• (refactor) gallery config