You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

angular2-image-gallery

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-image-gallery

Responsive Angular 2 image gallery

0.5.5
Source
npmnpm
Version published
Weekly downloads
61
-39%
Maintainers
1
Weekly downloads
 
Created
Source

Build Status npm version

A responsive image gallery designed for high resolution images.

The project consists of a gallery, a viewer and a script for image preparation.

Before using the gallery, you have to process all of your images that will be part of your gallery with the node.js script. The processed images will be stored to your applications assets. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care that an optimal image quality is served based on the device resolution.

Demo

http://oidamo.de/angular2-image-gallery/

Pre-requirements

Install node and graphicsmagick.

For windows users: http://www.graphicsmagick.org/download.html

For ubuntu users run: apt-get install graphicsmagick

Embed in your project

  • Install angular2-image-gallery
npm install angular2-image-gallery --save
  • Import angular2-image-gallery in your Angular 2 module
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  Angular2ImageGalleryModule <-----
],
  • Import scripts (when using angular-cli add these lines in polyfills.ts)
import 'web-animations-js/web-animations.min';
import 'hammerjs/hammer';
  • Import styles (when using angular-cli add this line in styles.css)
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
  • Run convert script
node node_modules/angular2-image-gallery/convert.js <path/to/your/images>
  • Embed gallery in your template
<gallery [flexBorderSize]="3" [flexImageSize]="7"></gallery>

The parameters flexBorderSize and flexImageSize are optional.

You may play around on the demo site to find out what parameters suit your needs.

That's it, start your application and have a look!

Currently used tools

  • Angular 2.3.1
  • NodeJS 7.3.0
  • Angular-CLI 1.0.0-beta.24
  • graphicsmagick

Troubleshooting

If the conversion process fails, make sure you have enough swap space provided.

If you experience any other issues, please raise an issue on GitHub.

Keywords

angular2

FAQs

Package last updated on 10 Jan 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