Skip to main content

Clickable Carousel Images

  1. Add this into "scripts"
  2. Make every teasers title hide
// Clickable carousel images without Text - use if no external links 

// 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 - External Site open in new tab 

// 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');
        }
    });
});