I just launched my website : https://lise-whales.com/
Joomla 3.9.28
Astroid Framework 2.5.2
Astroid Template One 1.3.2
I want to use Featherlight lightbox with JS script
So I past before the </head in Astroid custom code area
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
and before </body in Astroid custom code area (see attached picture)
<!DOCTYPE html>
<!-- Featherlight -->
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<!-- End - Featherlight -->
But before that, I'm trying to understand how use basic JS I'm working on a basic example from Stackoverflow
On my home page I have this link whick works fine alone and links to my second page
<a id="ali" alt="Ali" href="https://lise-whales.com/page-fl">Link</a>
Then, when I place my code in the JS custom code of Astroid to make my ID "ali" to change the href to stackoverflow web site, it doesn't work
$(document).ready(function() {
$("#ali").attr("href","https://stackoverflow.com");
});
I also used
jQuery(document).ready(function($) {
as an alternative, but it still doesn't work
What I am doing wrong ?
Where should I put my JS code ?
Thanks
Lise
Here are the pictures from my Astroid Template Custom Code Area.