lightGallery Angular

Full featured image and video gallery component for angular.

StackBlitz Demo

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
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 10, you can import it using 
// import { LightgalleryModule } from 'lightgallery/angular/9';

@NgModule({
    imports: [LightgalleryModule],
})
export class AppModule {}

Since, version 2.2.0-beta.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 10, you can import it by suffixing the version number as shown below

import { LightgalleryModule } from 'lightgallery/angular/10';
  • import styles in styles.scss
@import '~lightgallery/scss/lightgallery';
  • template
<lightgallery [settings]="settings" [onInit]="onInit">
    <a href="img/img1.jpg">
        <img alt=".." src="img/thumb1.jpg" />
    </a>
    <a href="img/img1.jpg">
        <img alt=".." 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=".." src="img/thumb1.jpg" />
            </a>
            <a href="img/img1.jpg">
                <img alt=".." 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:

NameTypeDescription
instanceLightGallerylightGallery 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:

NameTypeDescription
indexnumberIndex of the slide

Name: onAfterAppendSubHtml

Description: Called when the sub-html content (ex : title/ description) has been appended into the slide.

Detail:

NameTypeDescription
indexnumberIndex of the slide

Name: onSlideItemLoad

Description: Called once the media inside the slide has been completely loaded .

Detail:

NameTypeDescription
delaynumberFirst time when an item is loaded lightGallery adds some delay for showing the completed item to show transition effect on item load Respect the delay when you use this event
indexnumberIndex of the slide

Name: onHasVideo

Description: Called when lightGallery detects video slide

Detail:

NameTypeDescription
hasPosterbooleanTrue if video has poster
html5VideoVideoSourceHTML5 video source if available

HTML5 video source = source: { src: string; type: string; }[]; attributes: HTMLVideoElement;

indexnumberIndex of the slide,
isFirstSlidebooleanTrue for first slide
srcstringVideo source

Name: onBeforeSlide

Description: Called immediately before each slide transition.

Detail:

NameTypeDescription
fromThumbbooleantrue if slide function called via thumbnail click
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide
prevIndexnumberIndex of the previous slide

Name: onAfterSlide

Description: Called immediately after each slide transition.

Detail:

NameTypeDescription
fromThumbbooleantrue if slide function called via thumbnail click
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide
prevIndexnumberIndex of the previous slide

Name: onBeforeNextSlide

Description: Called immediately before each "next" slide transition

Detail:

NameTypeDescription
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide

Name: onBeforePrevSlide

Description: Called immediately before each "prev" slide transition

Detail:

NameTypeDescription
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex 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 sub-html content (ex : title/ description) has been appended into the slide.

Detail:

NameTypeDescription
indexnumberIndex 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:

NameTypeDescription
instanceLightGallerylightGallery plugin instance

Updating slides

lightGallery does not update slides automatically due to performance reasons. But you can easily update slides whenever needed by calling refresh method.

StackBlitz Demo

@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;
    };
}

Edit this page on GitHub