fslightbox.js Not Working in Blazor

I tried to add JavaScript Reference on Header section of _Master.cshtml, LayoutScripts.Razor, and component itself (OnAfterRender event). But its not working. When click on image it open in new tab on browser.

Another Question is under Themesettings.json there are some vendors libraries. How Can I load them (e.g. Even If I add my own custom libraries). I am asking coz only libraries mentioned in top CSS and JS section under Assets node are loading. Not Vendors Libraries.
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)

Hi Usman,

Sorry for the late reply.

To use fslightbox.js plugin you need to include the file below. plugins/custom/fslightbox/fslightbox.bundle.js

Here is fslightbox.js usage example, make sure that you have included all required attributes on your fslightbox instance.
<!--begin::Overlay-->
<a class="d-block overlay" data-fslightbox="lightbox-basic" href="assets/media/stock/900x600/23.jpg">
<!--begin::Image-->
<div class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-175px"
>
</div>
<!--end::Image-->

<!--begin::Action-->
<div class="overlay-layer card-rounded bg-dark bg-opacity-25 shadow">
<i class="bi bi-eye-fill text-white fs-3x"></i>
</div>
<!--end::Action-->
</a>
<!--end::Overlay-->



You can check out our fslightbox documentation for more info:
https://preview.keenthemes.com/html/metronic/docs/general/fslightbox

At the moment "Vendors" object is just for reference, you can copy file paths from this object and then include them on your page.

Regards,
Lauris Stepanovs,
Keenthemes Support Team
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  :(

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle