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 @angular/cdk ng-gallery

This plugin depends on Angular CDK for the lightbox feature, you don't need to import anything from the CDK, just make sure that it is installed in the project.

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 cdk and ng-gallery:

map: {
  '@angular/cdk': 'node_modules/@angular/cdk/bundles/cdk.umd.js',
  '@angular/cdk/bidi': 'node_modules/@angular/cdk/bundles/cdk-bidi.umd.js',
  '@angular/cdk/coercion': 'node_modules/@angular/cdk/bundles/cdk-coercion.umd.js',
  '@angular/cdk/keycodes': 'node_modules/@angular/cdk/bundles/cdk-keycodes.umd.js',
  '@angular/cdk/platform': 'node_modules/@angular/cdk/bundles/cdk-platform.umd.js',
  '@angular/cdk/portal': 'node_modules/@angular/cdk/bundles/cdk-portal.umd.js',
  '@angular/cdk/overlay': 'node_modules/@angular/cdk/bundles/cdk-overlay.umd.js',
  '@angular/cdk/scrolling': 'node_modules/@angular/cdk/bundles/cdk-scrolling.umd.js',
  'ng-gallery': 'node_modules/ng-gallery/bundles/ng-gallery.umd.js',
}

Here is a plunkr/stackblitz

Usage

1. Import GalleryModule.forRoot(...) in the root module

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)
   ]
  })

1. Load images into the gallery

Add images into the gallery by using the service Gallery.load(...), see basic example.

Alternatively, you can automatically add images using the directive [gallerize], see auto-detect example.

After that use will be able to use <gallery></gallery> component to display the gallery in the template.

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

Load image

Use the service Gallery to load images

import { Gallery, GalleryItem } from 'ng-gallery';

export class AppComponent implements OnInit {

  constructor(public gallery: Gallery) { }

  ngOnInit() {
    const images: GalleryItem[] = [
      {
        src: 'assets/clouds.jpg',
        thumbnail: 'assets/clouds.jpg',
        text: 'Sky & Clouds'
      },
      // ...
    ];

    this.gallery.load(images);
  }
}

Auto-detect

The directive [gallerize] will automatically detect all images inside the host element and hook them with the gallery lightbox.

This feature is useful in case you get the images as HTML string such as WordPress API

<div gallerize>
  <img src="assets/img/thumb/img3.jpg" src-full="assets/img/img3.jpg" alt="Spring">
  <img src="assets/img/thumb/img4.jpg" src-full="assets/img/img3.jpg" alt="Fire">
  <img src="assets/img/thumb/img5.jpg" src-full="assets/img/img3.jpg" alt="Peacock">
</div>

If src-full attribute is not defined, src will beused for the full size.

You can also detect images using their class, [gallerize]="'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>

Gallery Functions

Function Name	Description
setConfig(config)	Set gallery config
load(items)	Load new items and reset the state
set(index)	Set active item
next()	Set next item
prev()	Set prev item
play()	Start slide show
stop()	End slide show
open(index?)	Open gallery lightbox
close()	Close gallery lightbox
reset()	Reset gallery to initial state

Gallery Events

Event Name	Description
initialized()	Emits when gallery is initialized/reset
loaded()	Emits when images is loaded into the gallery
imageChanged()	Emits when image is changed
imageLoading()	Emits when image lazy loading is started/completed
navigationClick()	Emits when navigation is clicked
thumbnailClick()	Emits when thumbnail is clicked
bulletClick()	Emits when bullet is clicked
opened()	Emits when lightbox is opened
closed()	Emits when lightbox is closed
playing()	Emits when slide show is started
stopped()	Emits when slide show is stopped

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';

Support

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!

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

Changelog

1.0.1

• fix double click on thumbnails and bullets, closes #45.