Skip to main content

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