Clickable Carousel Images
Add this into "scripts"
// Clickable carousel images without Text.
$(function() {
// Iterate over each .carousel-instance
$('.carousel-instance').each(function() {
var selected = $(this);
// Select the image and caption
var image = selected.find('.homepage-carousel-image');
var caption = selected.find('.homepage-carousel-caption');
// Check if the caption contains exactly the word "Hide" (case-insensitive)
var hideExists = caption.find('.external h2, [id^="carousel-label-"] h2').filter(function() {
// Convert text to lowercase, trim spaces, and check if it equals "hide"
return $.trim($(this).text()).toLowerCase() === "hide";
}).length > 0;
// Extract the link from the caption
var link = caption.find('a');
if (link.length) {
// Add click event listener to the image to follow the link
image.css('cursor', 'pointer');
image.on('click', function() {
window.location.href = link.attr('href');
});
}
// Hide the caption if "Hide" exists
if (hideExists) {
caption.css('display', 'none');
} else {
// Ensure the caption is visible if "Hide" does not exist
caption.css('display', 'block');
}
});
});