Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ng5-gallery

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng5-gallery

Angular Image Gallery

  • 0.7.2-test.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

npm npm Travis branch npm npm

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',
}

Here is a live plunkr

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 galleryConfig : GalleryConfig = {
    // ...
  }
  
  @NgModule({
   imports: [
      // ...
      BrowserAnimationsModule,
      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>

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

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!

Keywords

FAQs

Package last updated on 02 Nov 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc