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