ng-gallery

Angular Image Gallery

Angular image gallery simplifies the process of creating beautiful image gallery for the web and mobile devices.

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 { BrowserAnimationsModule } from  '@angular/platform-browser/animations';
  import { GalleryModule } from 'ng-gallery';
  
  export const config : GalleryConfig = {
    // ...
  }
  
  @NgModule({
   imports: [
      // ...
      BrowserAnimationsModule,
      GalleryModule.forRoot(config)
   ]
  })

• After that add <gallery></gallery> in the template, see basic example

• Or if you want to open the gallery in an overlay, use the service gallery.open(), see gallery overlay example

Finally, load the images and there are two options:

• Using GalleryService

images = [
  {
    src: "",
    text: "anything",
    "thumbnails: ""
  },
  {
    src: "",
    text: "",
    "thumbnails: ""
  },
];

constructor(private gallery: Gallery) { }

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

• Using [gallerize] directive

<div gallerize>
  <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>

Load images with specific class name

<div gallerize='cars'>
  <img class='cars' src='assets/img/img3.jpg' alt='BMW'>
  <img class='cars' src='assets/img/img4.jpg' alt='Toyota'>
  <img class='bikes' src='assets/img/img5.jpg' alt='S800'>
</div>

Gesture Support (optional)

Gallery Module relies on HammerJS for gestures, make sure it is loaded into the application.

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 install --save hammer.js

After installing, import it on your app's root module

import 'hammerjs';

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!