38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
|
var total = document.querySelectorAll("[nav-pills]");
|
||
|
|
|
||
|
|
if (total[0]) {
|
||
|
|
total.forEach((nav_pills) => {
|
||
|
|
var gallery = document.querySelector("[" + nav_pills.getAttribute("aria-controls") + "]");
|
||
|
|
|
||
|
|
var links = nav_pills.querySelectorAll("li a[nav-link]");
|
||
|
|
|
||
|
|
links.forEach((link) => {
|
||
|
|
link.addEventListener("click", function () {
|
||
|
|
var selected_image = gallery.querySelector("#" + link.getAttribute("aria-controls"));
|
||
|
|
|
||
|
|
if (!selected_image.hasAttribute("active")) {
|
||
|
|
let active_link = nav_pills.querySelector("li a[nav-link][active]");
|
||
|
|
let active_image = gallery.querySelector("#" + active_link.getAttribute("aria-controls"));
|
||
|
|
|
||
|
|
active_image.classList.add("opacity-0");
|
||
|
|
active_image.classList.remove("block");
|
||
|
|
setTimeout(function () {
|
||
|
|
active_image.classList.add("hidden");
|
||
|
|
// your code to be executed after .15 second
|
||
|
|
}, 150);
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
selected_image.classList.remove("hidden");
|
||
|
|
// //your code to be executed after .15 second
|
||
|
|
}, 150);
|
||
|
|
selected_image.classList.remove("opacity-0");
|
||
|
|
selected_image.classList.add("block");
|
||
|
|
|
||
|
|
active_image.removeAttribute("active");
|
||
|
|
selected_image.setAttribute("active", "true");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|