# easy-elements/1.5.0/widgets/gallery/js/simple-gallery.js

Easy Elements for Elementor – Addons & Website Templates, version 1.5.0. 66 lines.

- Page: https://pluginprobe.com/plugins/easy-elements/1.5.0/code/widgets/gallery/js/simple-gallery.js
- Raw: https://pluginprobe.com/plugins/easy-elements/1.5.0/raw/widgets/gallery/js/simple-gallery.js
- Modified: 2026-06-17T10:35:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/easy-elements/1.5.0/code/widgets/gallery/js/simple-gallery.js#L10-L20`.

```javascript
(function ($) {
    "use strict";

    // Elementor hook
    const initEelGalleryPopup = function ($scope) {
        const $gallery = $scope.find('.eel-gallery-grid.eel-popup-enabled');
        if (!$gallery.length) return;

        let currentIndex = 0;
        const $lightbox = $scope.find('.eel-lightbox-gallery');
        const $lightboxImg = $lightbox.find('.eel-lightbox-image');
        const $galleryLinks = $gallery.find('.eel-popup-link');

        function openLightbox(index) {
            currentIndex = index;
            const imgSrc = $galleryLinks.eq(currentIndex).attr('href');
            $lightboxImg.attr('src', imgSrc);
            $lightbox.fadeIn(300).css('display', 'grid');
        }

        function showNext() {
            currentIndex = (currentIndex + 1) % $galleryLinks.length;
            $lightboxImg.attr('src', $galleryLinks.eq(currentIndex).attr('href'));
        }

        function showPrev() {
            currentIndex = (currentIndex - 1 + $galleryLinks.length) % $galleryLinks.length;
            $lightboxImg.attr('src', $galleryLinks.eq(currentIndex).attr('href'));
        }

        $galleryLinks.off('click').on('click', function (e) {
            e.preventDefault();
            const index = $(this).data('index');
            openLightbox(index);
        });

        $lightbox.find('.eel-next').off('click').on('click', showNext);
        $lightbox.find('.eel-prev').off('click').on('click', showPrev);
        $lightbox.find('.eel-close').off('click').on('click', function () {
            $lightbox.fadeOut(200);
        });

        $lightbox.off('click').on('click', function (e) {
            if ($(e.target).is('.eel-lightbox-gallery, .eel-close')) {
                $lightbox.fadeOut(200);
            }
        });

        $(document).off('keydown.eelLightbox').on('keydown.eelLightbox', function (e) {
            if ($lightbox.is(':visible')) {
                if (e.key === 'ArrowRight') showNext();
                else if (e.key === 'ArrowLeft') showPrev();
                else if (e.key === 'Escape') $lightbox.fadeOut(200);
            }
        });
    };

    // ✅ Works on both frontend and Elementor editor
    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction(
            'frontend/element_ready/eel-gallery.default',
            initEelGalleryPopup
        );
    });

})(jQuery);
```