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 --saveImport 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
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
