Image and video gallery for Angular
Full featured image and video lightbox gallery component for angular.
Installation
Follow the below steps to use lightGallery angular component in your application. Angular component is part of the main lightGallery package on NPM. You can import it using the following way
-
Install lightGallery via NPM
npm install lightgallery
-
Import lightGallery module
// For angular version 14
import { LightgalleryModule } from 'lightgallery/angular';
// lightGallery supports the last 4 major version of Angular,
// if you are using older versions of angular, you can import the respective versions
// For example, if you are using Angular version 13, you can import it using
// import { LightgalleryModule } from 'lightgallery/angular/13';
@NgModule({
imports: [LightgalleryModule],
})
export class AppModule {}
Since, version 2.2.0, lightGallery supports the last 4 major versions of Angular. If you are using an older version of Angular, please choose the respective version.
For example, if you are using Angular version 13, you can import it by suffixing the version number as shown below
import { LightgalleryModule } from 'lightgallery/angular/13';
- import styles in styles.scss
@import '~lightgallery/scss/lightgallery';
- template
<lightgallery [settings]="settings" [onInit]="onInit">
<a href="img/img1.jpg">
<img alt="img1" src="img/thumb1.jpg" />
</a>
<a href="img/img1.jpg">
<img alt="img2" src="img/thumb1.jpg" />
</a>
</lightgallery>
Inputs
All lightGallery settings can be passed to angular component via settings input. Additionally, you can use lifecycle hook methods listed below to hook into lightGalley component lifecycle. Almost every method passes a detail object which holds useful plugin data
usage example
@Component({
selector: 'gallery',
template: `
<lightgallery [settings]="settings" [onBeforeSlide]="onBeforeSlide">
<a href="img/img1.jpg">
<img alt="img1" src="img/thumb1.jpg" />
</a>
<a href="img/img1.jpg">
<img alt="img2" src="img/thumb1.jpg" />
</a>
</lightgallery>
`,
})
export class AppComponent {
settings = {
counter: false,
plugins: [lgZoom],
};
onBeforeSlide = (detail: BeforeSlideDetail): void => {
const { index, prevIndex } = detail;
console.log(index, prevIndex);
};
}
Name: onInit
Description: Called only once when lightGallery is initialized
Detail:
| Name | Type | Description |
|---|---|---|
| instance | LightGallery | lightGallery plugin instance |
Name: onBeforeOpen
Description: Called immediately before opening the gallery
Name: onAfterOpen
Description: Called immediately after opening the gallery
Name: onAfterAppendSlide
Description: Called when the slide content has been inserted into it's slide container.
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onAfterAppendSubHtml
Description: Called when the sub-html content (ex : title/ description) has been appended into the slide.
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onSlideItemLoad
Description: Called once the media inside the slide has been completely loaded .
Detail:
| Name | Type | Description |
|---|---|---|
| delay | number | For the first slide, lightGallery adds some delay for displaying the loaded slide item. This delay is required for the transition effect when the slide item is displayed Respect the delay when you use this event |
| index | number | Index of the slide |
| isFirstSlide | boolean |
Name: onHasVideo
Description: Called when lightGallery detects video slide
Detail:
| Name | Type | Description |
|---|---|---|
| hasPoster | boolean | True if video has poster |
| html5Video | VideoSource |
HTML5 video source if available
HTML5 video source = source: { src: string; type: string; }[]; attributes: HTMLVideoElement; |
| index | number | Index of the slide, |
| src | string | Video source |
Name: onBeforeSlide
Description: Called immediately before each slide transition.
Detail:
| Name | Type | Description |
|---|---|---|
| fromThumb | boolean | true if slide function called via thumbnail click |
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
| prevIndex | number | Index of the previous slide |
Name: onAfterSlide
Description: Called immediately after each slide transition.
Detail:
| Name | Type | Description |
|---|---|---|
| fromThumb | boolean | true if slide function called via thumbnail click |
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
| prevIndex | number | Index of the previous slide |
Name: onBeforeNextSlide
Description: Called immediately before each "next" slide transition
Detail:
| Name | Type | Description |
|---|---|---|
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
Name: onBeforePrevSlide
Description: Called immediately before each "prev" slide transition
Detail:
| Name | Type | Description |
|---|---|---|
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
Name: onPosterClick
Description: Called when the video poster is clicked.
Name: onDragStart
Description: Called when the drag event to move to different slide starts.
Name: onDragMove
Description: Called periodically during the drag operation.
Name: onDragEnd
Description: Called when the user has finished the drag operation
Name: onContainerResize
Description: Called when the lightGallery container has been resized.
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onBeforeClose
Description: Called immediately before the start of the close process.
Name: onAfterClose
Description: Called immediately once lightGallery is closed.
Detail:
| Name | Type | Description |
|---|---|---|
| instance | LightGallery | lightGallery plugin instance |
Name: onRotateLeft
Description: Called when the image is rotated in anticlockwise direction
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onRotateRight
Description: Called when the image is rotated in clockwise direction
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onFlipHorizontal
Description: Called when the image is flipped horizontally
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onFlipVertical
Description: Called when the image is flipped vertically
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Updating slides
lightGallery does not update slides automatically due to performance reasons.
But you can easily update slides whenever needed by calling refresh method.
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
private lightGallery!: LightGallery;
private needRefresh = false;
ngAfterViewChecked(): void {
if (this.needRefresh) {
this.lightGallery.refresh();
this.needRefresh = false;
}
}
title = 'angular-demo';
settings = {
counter: false,
plugins: [lgZoom],
};
items = [
{
id: '1',
size: '1400-800',
src: 'img-1.jpg',
thumb: 'thumb-1.jpg',
},
{
id: '2',
size: '1400-800',
src: 'img-2.jpg',
thumb: 'thumb-2.jpg',
},
];
onInit = (detail: InitDetail): void => {
this.lightGallery = detail.instance;
};
addImage = () => {
this.items = [
...this.items,
{
id: '5',
size: '1400-800',
src: 'img-5.jpg',
thumb: 'thumb-5.jpg',
},
];
this.needRefresh = true;
};
}