Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(