[Elementor Pro Linked Gallery Images] Simple JS to add links to your Elementor Pro gallery images #elementor

link-elementor-pro-gallery-images.js

<script type="text/javascript">
/**
 * ELEMENTOR PRO LINKED GALLERY IMAGES
 *
 * Adds event listeners to elements with the class 'e-gallery-item' once the DOM is fully loaded.
 * This function iterates over each 'e-gallery-item' and checks against a predefined array of URLs (links).
 * 
 * If a valid URL is found at the corresponding index in the links array, the function sets the element's 
 * cursor style to 'pointer', assigns the URL to the href attribute, and sets the target attribute to '_blank'
 * for opening the link in a new tab. 
 *
 * If there is no valid URL (an empty string or undefined), it removes
 * the href attribute from the element to prevent navigation.
 *
 * Assumptions:
 * - The elements with the class 'e-gallery-item' are expected to be anchor (`<a>`) elements.
 * - The 'links' array is predefined and contains URLs corresponding to each 'e-gallery-item' element.
 * - The order of URLs in the 'links' array should match the order of 'e-gallery-item' elements in the DOM.
 *
 * Usage:
 * This script should be included in an HTML file where 'e-gallery-item' elements are present.
 * It should be executed after the DOM is fully loaded.
 *
 * Credits:
 * [Elementor Pro Gallery - Add Different Links to Each Image](https://element.how/elementor-gallery-links-pro/)
 */
document.addEventListener('DOMContentLoaded', function () {
    let linkedImages = document.querySelectorAll('.e-gallery-item');

    let links = [
        '',
        'https://example.com/link-one/',
        'https://example.com/link-two/',
    ];

    linkedImages.forEach((linkedImage, i) => {
        if (links[i] && links[i].length > 0) {
            linkedImage.style.cursor = "pointer";
            linkedImage.href = links[i];
            linkedImage.setAttribute('target','_blank');
        } else {
            linkedImage.removeAttribute('href');
        }
    });

});
</script>