how can i use lightbox in demo 5 angular project

I read the documentation of the metronics theme for light box use. and followed the steps but it's not working fine in the angular project.

Replies (1)

Hello,

May I know if you are referring to this docs page? The docs here is mostly only working for HTML version.
https://preview.keenthemes.com/html/metronic/docs/general/fslightbox

For angular, you may try this guide. To integrate fslightbox with Angular, you can follow these steps:

Install the fslightbox package using npm:

npm install fslightbox --save

Import fslightbox in your component where you want to use it:

import FsLightbox from 'fslightbox';

Create a variable for the lightbox instance:

lightbox = null;

In the ngOnInit() method of your component, initialize the lightbox instance:

ngOnInit() {
 this.lightbox = new FsLightbox();
}

Add a click event to the element that you want to trigger the lightbox:

<button (click)="openLightbox()">Open Lightbox</button>

In your component, create the openLightbox() method to open the lightbox when the button is clicked:

openLightbox() {
 this.lightbox.open([...]); // add your image or video URLs inside the square brackets
}

To close the lightbox, call the close() method of the lightbox instance:

this.lightbox.close();

Thanks