Light
Dark
System
Ask  Question

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.
U
Usman Jalil 1 week ago
Blazor
1 Answers
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)

user
Lauris Stepanovs Author6 days ago
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  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

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