ng2-image-gallery
v0.3.18
Published
Basic Angular 2 / 4 image gallery
Downloads
57
Maintainers
Readme
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!