Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bergben/ng2-image-gallery
Basic Angular 2 image gallery
https://github.com/bergben/ng2-image-gallery
Last synced: about 1 month ago
JSON representation
Basic Angular 2 image gallery
- Host: GitHub
- URL: https://github.com/bergben/ng2-image-gallery
- Owner: bergben
- License: mit
- Archived: true
- Created: 2016-12-18T23:27:21.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-12T16:55:41.000Z (over 6 years ago)
- Last Synced: 2024-09-18T10:18:39.343Z (3 months ago)
- Language: CSS
- Size: 91.8 KB
- Stars: 19
- Watchers: 4
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - ng2-image-gallery - Basic Angular 2 image gallery using Bootstrap 4 and Fontawesome (Uncategorized / Uncategorized)
README
[](https://gitter.im/bergben/bergben?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
# 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
```bash
$ npm install ng2-image-gallery --save
```
### Import the module
```TypeScript
// 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:
```
```
## Usage
### Use it in your template
```html
```
whereas "myImages" is an Array of objects that by default would have the following properties:
```TypeScript
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:
```html
```
### User interaction
You can also add some user interaction to the image by simply providing an actionText.
```html
```
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.
```html
```
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!