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.
Replies (9)
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
I have added the script reference in themesettings.json as you can see below then used your example and examples from the link you send.. but none is working in Blazor. Every time I click on Image it open in a new tab in browser.
The script shows it is loaded in under body at runtime.
src="/assets/plugins/custom/fslightbox/fslightbox.bundle.js"
------------------------------------
ThemeSettings.json
------------------------------------
"Js": [
"plugins/global/plugins.bundle.js",
"plugins/custom/fslightbox/fslightbox.bundle.js",
"js/scripts.bundle.js"
]
Also same thing with tinyslider it is also not working.
https://preview.keenthemes.com/html/metronic/docs/general/tiny-slider/advanced
Hi Usman,
Do you have any errors in your browser console?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
No there is none error. Only following warning.
DevTools failed to load source map: Could not load content for https://localhost:7089/assets/plugins/global/toastr.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
blazor.server.js:1 [2023-06-07T04:32:55.733Z] Information: Normalizing "_blazor" to "https://localhost:7089/_blazor".
<pre lang="html"></pre>
Hi Usman,
The warning doesn't seem to be related to fslightbox.
Did you make any changes in our core js files?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
No, I didn't change anything in original files. If you have some working example in Blazor and if you can send me will appreciate.
Even in in your Template's Blazor Example there is nothing much except main layout and home page.
Hi Usman,
Can you try to include fslightbox.bundle.js in Shared/Layout/_LayoutScripts.razor?
...
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("plugins/custom/fslightbox/fslightbox.bundle.js")"></script>Regards,
Lauris Stepanovs,
Keenthemes Support Team
Finally, after adding the script as you said in Layout Component and doing hard refresh of the browser its working now.
Thanks
Hi Usman,
Glad to hear that. All the best with your project!
Please don't hesitate to reach out if you need anything more from us.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
