Trigger Lightbox with The leaflet map plugin

  • Resolved totorosk8

    (@totorosk8)


    9 months ago

    Hi, i know this is not directly a Meow Lightbox problem, but if i could have an idea, some clarification on why it doesn’t work and in which direction to look it would help me a lot.
    I’m using Leaflet Map plugin (with Extensions for Leaflet Map) and i changed the ‘layer on click’ function to open a picture instead of a popup. And i want to open those pictures inside the Meow Lightbox, i added the ‘selector’ ‘.lightbox-map-image’ but that’s not working.
    I have a geojson overlay on my plan and this is how i try to open the lightbox inside Leafleat Map : 

        // Ajout d'une action personnalisée lors du clic sur une zone geojson
        layer.on('click', function(e) {
            // Récupérer les URL des images depuis le tableau imageUrls du fichier geojson
            var imageUrls = props.imageUrls || [];

            // Créer le contenu de la lightbox avec les images
            var lightboxContent = '';
            imageUrls.forEach(function(url) {
                lightboxContent += '<a class="lightbox-map-image" href="' + url + '" data-lightbox="my-lightbox"><img class="lightbox-map-image" src="' + url + '" /></a>';
            });

            // Afficher la lightbox avec le contenu des images
            var lightbox = document.querySelector('.meow-lightbox');
            if (lightbox) {
                lightbox.innerHTML = lightboxContent;
            } else {
                lightbox = document.createElement('div');
                lightbox.className = 'meow-lightbox';
                lightbox.innerHTML = lightboxContent;
                document.body.appendChild(lightbox);
            }
            MeowLightbox.init({
        selector: 'a[data-lightbox="my-lightbox"]',
        navigation: true,
        closeOnBgClick: true
    });

            MeowLightbox.open(0);
        });
    }

    How can I trigger the opening of the image in the Lightbox ?
    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter totorosk8

    (@totorosk8)

    edit : I think i understand that your plugin scan the page has its display to see the images and prepare them for the Lightbox, but how to do that for images that are not yet present in the page, because they will open when following a click event like i do on the first post ?
    Sorry if it’s a bit messy.

    Plugin Support Val Meow

    (@valwa)

    Hey @totorosk8! ??

    What you can do on the Lightbox side is call the renderMeowLightbox(); function. This function is exported to your DOM and can be called by anything at any time. As the name suggests, it will re-render the lightbox, and everything should work properly. Also, make sure the images are coherent with your selector from the settings. Hope this helps!

    Thread Starter totorosk8

    (@totorosk8)

    Great i will try it !
    Many thanks for your help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Trigger Lightbox with The leaflet map plugin’ is closed to new replies.