Clickable Carousel Images
- Add this into "scripts"
- Make every teasers title hide
// 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');
}
});
});
// Clickable carousel images without Text.
$(function() {
$('.carousel-instance').each(function() {
var selected = $(this);
var image = selected.find('.homepage-carousel-image');
var caption = selected.find('.homepage-carousel-caption');
var hideExists = caption.find('.external h2, [id^="carousel-label-"] h2').filter(function() {
return $.trim($(this).text()).toLowerCase() === "hide";
}).length > 0;
var link = caption.find('a');
if (link.length) {
var href = link.attr('href');
var linkHostname;
try {
linkHostname = new URL(href, window.location.href).hostname;
} catch (e) {
// fallback in case of invalid URL
linkHostname = window.location.hostname;
}
var isExternal = linkHostname !== window.location.hostname;
image.css('cursor', 'pointer');
image.on('click', function() {
if (isExternal) {
window.open(href, '_blank');
} else {
window.location.href = href;
}
});
}
if (hideExists) {
caption.css('display', 'none');
} else {
caption.css('display', 'block');
}
});
});