1. Accueil
  2. Base de connaissances
  3. FAQ
  4. Comment ouvrir des images dans une boîte à lumière ?

Comment ouvrir des images dans une boîte à lumière ?

Vous pouvez utiliser le oum_location_bubble_image pour manipuler la sortie de l'image de localisation. Cela vous permet par exemple d'ajouter une fonction "lightbox".

Exemple : Boîte à lumière avec WP Featherlight

Je recommande d'utiliser le Plugin WP Featherlight pour obtenir un effet "lightbox" sur les images. Le script PHP suivant (ajoutez-le au fichier functions.php de votre thème ou utilisez un plugin Code Snippet) vous permet d'activer l'effet "lightbox" pour les images de localisation. Il ajoute l'élément data-featherlight="image" aux images.

PHP
add_filter('oum_location_bubble_image', function ($image, $location) {
    // Define the data attribute to be added
    $data_attribute = 'data-featherlight="image"';

    // Add the data attribute to images that do not already have it
    $image = preg_replace('/<img(?![^>]*data-featherlight=)([^>]+)>/', '<img$1 ' . $data_attribute . '>', $image);

    return $image;
}, 10, 2);

Exemple : Ajouter une classe personnalisée aux images

PHP
add_filter('oum_location_bubble_image', function ($image, $location) {
    // Define the class to be added
    $custom_class = 'lightbox';

    // Add the custom class to images that already have a class attribute
    $image = preg_replace('/<img(.*?)class="([^"]*)"(.*?>)/', '<img$1class="$2 ' . $custom_class . '"$3', $image);

    return $image;
}, 10, 2);
PHP
add_filter('oum_location_bubble_image', function ($image, $location) {
    // Wrap images inside <a class="lightbox" href="image-src">
    $image = preg_replace_callback(
        '/<img([^>]*?)src=["\'](.*?)["\'](.*?)>/',
        function ($matches) {
            $imgTag = '<img' . $matches[1] . 'src="' . $matches[2] . '"' . $matches[3] . '>';
            return '<a class="lightbox" href="' . $matches[2] . '">' . $imgTag . '</a>';
        },
        $image
    );

    return $image;
}, 10, 2);
Cet article vous a-t-il été utile ?

Articles connexes


FR