nig

ng2-image-gallery

Basic Angular 2 image gallery

Showing:

Popularity

Downloads/wk

24

GitHub Stars

20

Maintenance

Last Commit

3yrs ago

Contributors

3

Package

Dependencies

3

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

Join the chat at https://gitter.im/bergben/bergben

Not actively maintained anymore

Unfortunately I don't have time to actively maintain my open source repos anymore. If anyone wants to take over, feel free to contact me, I'd be happy if this project still finds use.

ng2-image-gallery

Basic Angular 2 / 4 image gallery.
For compatibility with Angular 5 this issue would have to be resolved: https://github.com/bergben/ng2-image-gallery/issues/9

Demo

A simple demo is available as a plnkr: http://plnkr.co/edit/Qyg5m7XsiKCBpqa6I4ku?p=preview

Install

$ npm install ng2-image-gallery --save

Import the module

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2ImageGalleryModule } from 'ng2-image-gallery'; // <-- import the module
import { MyComponent } from './my.component';

@NgModule({
    imports: [BrowserModule,
              Ng2ImageGalleryModule // <-- include it in your app module
             ],
    declarations: [MyComponent],  
    bootstrap: [MyComponent]
})
export class MyAppModule {}

Import the styles

This library uses Bootstrap 4, so make sure to install that if you want the default styling to apply.

If you use Sass / Scss you can import the styles like so:

@import "{}/node_modules/ng2-image-gallery/ng2-image-gallery.scss";

alternatively just include the css file like this:

<link href="node_modules/ng2-image-gallery/ng2-image-gallery.css" rel="stylesheet" />

Usage

Use it in your template

<ng2-image-gallery [images]="myImages"></ng2-image-gallery> 

whereas "myImages" is an Array of objects that by default would have the following properties:

export interface ImageInterface {
    thumbnail?: any; //image src for the thumbnail
    image?: any; //image src for the image 
    text?: string; //optional text to show for the image
    [propName: string]: any;
}

You can, as it might be more comfortable for you because you have different naming for your properties already, provide different naming for the properties like so:

<ng2-image-gallery [images]="myImages" [asText]="'content'" [asThumbnail]="'mythumb'"></ng2-image-gallery> 

User interaction

You can also add some user interaction to the image by simply providing an actionText.

<ng2-image-gallery [images]="myImages" [actionText]="'do something!'" (onAction)="doSomething($event)"></ng2-image-gallery> 

You can then style the button and listen to the onAction output event.

Draggable / sortable

For administration purposes it might be useful to make the thumbnails draggable so that you can change the order of images in a gallery. Simply set draggable="true" to do so.

<ng2-image-gallery [images]="myImages" [draggable]="true" (onDrop)="onDrop($event)"></ng2-image-gallery> 

You can listen to the onDrop event, which will have a property images which contains the images in the current order.

Contribute

It would be awesome if someone had the time to make some improvements, like:

  • animations
  • limit to show only 10 thumbnails and then "+x more" etc.
  • allow usage of keys

Pull requests are much appreciated!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial