WordPress – On click of image carousel with lightbox, taking to image url and then showing lightbox

I have a wordpress website where I am using elementor Image Carousel in Blocksy theme. Here are the option I have selected for the images

  1. Link – Media File
  2. Lightbox – Yes

When I click on the image, first I am navigated to media url – /wp-content/uploads/image
and when I go back, I see the lightbox (default one with elementor) opened with the image in full screen.

Here, on click of a image, I want to just open the lightbox without navigating to /wp-content/uploads/image path. How can I achieve this?

I tried running the below jQuery and also similar php code using WP Code Light Plugin. also tried few chatgpt answers which didn’t work.

    // Ensure the script runs after the DOM is fully loaded
    $('.carousel a').on('click', function(e) {
        e.preventDefault(); // Prevent the default link behavior

        // Get the href attribute of the clicked link
        var href = $(this).attr('href');

        // Ensure the lightbox plugin is available and has a method to open images
        if (typeof $.featherlight === 'function') {
            $.featherlight(href); // Open the lightbox (replace with the correct method if using another plugin)
        } else {
            console.error('Featherlight plugin is not loaded or available.');
        }
    });
});

Please share share a solution for this? I am ok to use any free Carousel unless it supports Image view in full screen on click. Thanks!