{"id":5663,"date":"2024-09-10T09:11:57","date_gmt":"2024-09-10T07:11:57","guid":{"rendered":"https:\/\/www.open-user-map.com\/?post_type=ht_kb&p=5663"},"modified":"2025-03-20T15:02:11","modified_gmt":"2025-03-20T14:02:11","slug":"how-to-open-images-in-a-lightbox","status":"publish","type":"ht_kb","link":"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/how-to-open-images-in-a-lightbox\/","title":{"rendered":"Comment ouvrir des images dans une bo\u00eete \u00e0 lumi\u00e8re ?"},"content":{"rendered":"

Vous pouvez utiliser le oum_location_bubble_image<\/strong> pour manipuler la sortie de l'image de localisation. Cela vous permet par exemple d'ajouter une fonction \"lightbox\". <\/p>\n\n\n\n

<\/div>\n\n\n\n

Exemple : Bo\u00eete \u00e0 lumi\u00e8re avec WP Featherlight<\/h2>\n\n\n\n

Je recommande d'utiliser le Plugin WP Featherlight<\/a> pour obtenir un effet \"lightbox\" sur les images. Le script PHP suivant (ajoutez-le au fichier functions.php de votre th\u00e8me ou utilisez un plugin Code Snippet) vous permet d'activer l'effet \"lightbox\" pour les images de localisation. Il ajoute l'\u00e9l\u00e9ment data-featherlight=\"image\"<\/mark> aux images.<\/p>\n\n\n\n

PHP<\/span>
add_filter<\/span>(<\/span>'<\/span>oum_location_bubble_image<\/span>'<\/span>,<\/span> <\/span>function<\/span> <\/span>($image,<\/span> <\/span>$location)<\/span> <\/span>{<\/span><\/span>\n    <\/span>\/\/ Define the data attribute to be added<\/span><\/span>\n    <\/span>$data_attribute<\/span> <\/span>=<\/span> <\/span>'<\/span>data-featherlight="image"<\/span>'<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>\/\/ Add the data attribute to images that do not already have it<\/span><\/span>\n    <\/span>$image<\/span> <\/span>=<\/span> <\/span>preg_replace<\/span>(<\/span>'\/<\/span><img(?!<\/span>[<\/span>^><\/span>]<\/span>*<\/span>data-featherlight=)(<\/span>[<\/span>^><\/span>]<\/span>+<\/span>)><\/span>\/'<\/span>,<\/span> <\/span>'<\/span><img$1 <\/span>'<\/span> <\/span>.<\/span> <\/span>$data_attribute<\/span> <\/span>.<\/span> <\/span>'<\/span>><\/span>'<\/span>,<\/span> <\/span>$image);<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> <\/span>$image;<\/span><\/span>\n},<\/span> <\/span>10<\/span>,<\/span> <\/span>2<\/span>);<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
Exemple : Ajouter une classe personnalis\u00e9e aux images<\/h2>\n\n\n\n
PHP<\/span>
add_filter<\/span>(<\/span>'<\/span>oum_location_bubble_image<\/span>'<\/span>,<\/span> <\/span>function<\/span> <\/span>($image,<\/span> <\/span>$location)<\/span> <\/span>{<\/span><\/span>\n    <\/span>\/\/ Define the class to be added<\/span><\/span>\n    <\/span>$custom_class<\/span> <\/span>=<\/span> <\/span>'<\/span>lightbox<\/span>'<\/span>;<\/span><\/span>\n<\/span>\n    <\/span>\/\/ Add the custom class to images that already have a class attribute<\/span><\/span>\n    <\/span>$image<\/span> <\/span>=<\/span> <\/span>preg_replace<\/span>(<\/span>'\/<\/span><img(.<\/span>*<\/span>?)class="(<\/span>[<\/span>^"<\/span>]<\/span>*<\/span>)"(.<\/span>*<\/span>?>)<\/span>\/'<\/span>,<\/span> <\/span>'<\/span><img$1class="$2 <\/span>'<\/span> <\/span>.<\/span> <\/span>$custom_class<\/span> <\/span>.<\/span> <\/span>'<\/span>"$3<\/span>'<\/span>,<\/span> <\/span>$image);<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> <\/span>$image;<\/span><\/span>\n},<\/span> <\/span>10<\/span>,<\/span> <\/span>2<\/span>);<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
Exemple : Ins\u00e9rer des images dans un lien<\/h2>\n\n\n\n
PHP<\/span>
add_filter<\/span>(<\/span>'<\/span>oum_location_bubble_image<\/span>'<\/span>,<\/span> <\/span>function<\/span> <\/span>($image,<\/span> <\/span>$location)<\/span> <\/span>{<\/span><\/span>\n    <\/span>\/\/ Wrap images inside <a class="lightbox" href="image-src"><\/span><\/span>\n    <\/span>$image<\/span> <\/span>=<\/span> <\/span>preg_replace_callback<\/span>(<\/span><\/span>\n        <\/span>'\/<\/span><img(<\/span>[<\/span>^><\/span>]<\/span>*<\/span>?)src=<\/span>[<\/span>"\\'<\/span>]<\/span>(.<\/span>*<\/span>?)<\/span>[<\/span>"\\'<\/span>]<\/span>(.<\/span>*<\/span>?)><\/span>\/'<\/span>,<\/span><\/span>\n        <\/span>function<\/span> <\/span>($matches)<\/span> <\/span>{<\/span><\/span>\n            <\/span>$imgTag<\/span> <\/span>=<\/span> <\/span>'<\/span><img<\/span>'<\/span> <\/span>.<\/span> <\/span>$matches[<\/span>1<\/span>]<\/span> <\/span>.<\/span> <\/span>'<\/span>src="<\/span>'<\/span> <\/span>.<\/span> <\/span>$matches[<\/span>2<\/span>]<\/span> <\/span>.<\/span> <\/span>'<\/span>"<\/span>'<\/span> <\/span>.<\/span> <\/span>$matches[<\/span>3<\/span>]<\/span> <\/span>.<\/span> <\/span>'<\/span>><\/span>'<\/span>;<\/span><\/span>\n            <\/span>return<\/span> <\/span>'<\/span><a class="lightbox" href="<\/span>'<\/span> <\/span>.<\/span> <\/span>$matches[<\/span>2<\/span>]<\/span> <\/span>.<\/span> <\/span>'<\/span>"><\/span>'<\/span> <\/span>.<\/span> <\/span>$imgTag<\/span> <\/span>.<\/span> <\/span>'<\/span><\/a><\/span>'<\/span>;<\/span><\/span>\n        <\/span>},<\/span><\/span>\n        <\/span>$image<\/span><\/span>\n    <\/span>);<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> <\/span>$image;<\/span><\/span>\n},<\/span> <\/span>10<\/span>,<\/span> <\/span>2<\/span>);<\/span><\/span>\n<\/span><\/code><\/pre><\/div>","protected":false},"excerpt":{"rendered":"
Vous pouvez utiliser le crochet oum_location_bubble_image pour manipuler la sortie de l'image de localisation. Cela vous permet, par exemple, d'ajouter une fonction \"lightbox\". Exemple : Lightbox avec WP Featherlight Je recommande d'utiliser le plugin WP Featherlight pour obtenir un effet lightbox sur les images. Et avec le script PHP suivant (\u00e0 ajouter dans le r\u00e9pertoire de votre ... Suite<\/a><\/p>","protected":false},"author":50,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[53],"ht-kb-tag":[58,137,138,135,136,57],"class_list":["post-5663","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-faq","ht_kb_tag-custom","ht_kb_tag-fancybox","ht_kb_tag-images","ht_kb_tag-lightbox","ht_kb_tag-modal","ht_kb_tag-style"],"yoast_head":"\nHow to open images in a lightbox? - Open User Map<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/how-to-open-images-in-a-lightbox\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to open images in a lightbox? - Open User Map\" \/>\n<meta property=\"og:description\" content=\"You can use the oum_location_bubble_image hook to manipulate the output of the location image. This allows you to add a lightbox feature, for example. Example: Lightbox with WP Featherlight I would recommend using the WP Featherlight plugin to get a lightbox effect on images. And with the following PHP script (add it to your theme’s … Continued\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/how-to-open-images-in-a-lightbox\/\" \/>\n<meta property=\"og:site_name\" content=\"Open User Map\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-20T14:02:11+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/how-to-open-images-in-a-lightbox\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/how-to-open-images-in-a-lightbox\\\/\"},\"author\":{\"name\":\"Daniel Sch\u00f6nherr\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/person\\\/d9c8cbe470ae2702b6de61e0f73a7402\"},\"headline\":\"How to open images in a lightbox?\",\"datePublished\":\"2024-09-10T07:11:57+00:00\",\"dateModified\":\"2025-03-20T14:02:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/how-to-open-images-in-a-lightbox\\\/\"},\"wordCount\":109,\"publisher\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\"},\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/how-to-open-images-in-a-lightbox\\\/\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/how-to-open-images-in-a-lightbox\\\/\",\"name\":\"How to open images in a lightbox? - Open User Map\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#website\"},\"datePublished\":\"2024-09-10T07:11:57+00:00\",\"dateModified\":\"2025-03-20T14:02:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/how-to-open-images-in-a-lightbox\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/how-to-open-images-in-a-lightbox\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/how-to-open-images-in-a-lightbox\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.open-user-map.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to open images in a lightbox?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#website\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/\",\"name\":\"Open User Map\",\"description\":\"WordPress Map Plugin\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.open-user-map.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\",\"name\":\"Open User Map\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/icon-256x256-1.png\",\"contentUrl\":\"https:\\\/\\\/www.open-user-map.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/icon-256x256-1.png\",\"width\":256,\"height\":256,\"caption\":\"Open User Map\"},\"image\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/person\\\/d9c8cbe470ae2702b6de61e0f73a7402\",\"name\":\"Daniel Sch\u00f6nherr\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment ouvrir des images dans une bo\u00eete \u00e0 lumi\u00e8re ? - Open User Map","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/how-to-open-images-in-a-lightbox\/","og_locale":"fr_FR","og_type":"article","og_title":"How to open images in a lightbox? - Open User Map","og_description":"You can use the oum_location_bubble_image hook to manipulate the output of the location image. This allows you to add a lightbox feature, for example. Example: Lightbox with WP Featherlight I would recommend using the WP Featherlight plugin to get a lightbox effect on images. And with the following PHP script (add it to your theme’s … Continued","og_url":"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/how-to-open-images-in-a-lightbox\/","og_site_name":"Open User Map","article_modified_time":"2025-03-20T14:02:11+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/how-to-open-images-in-a-lightbox\/#article","isPartOf":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/how-to-open-images-in-a-lightbox\/"},"author":{"name":"Daniel Sch\u00f6nherr","@id":"https:\/\/www.open-user-map.com\/#\/schema\/person\/d9c8cbe470ae2702b6de61e0f73a7402"},"headline":"How to open images in a lightbox?","datePublished":"2024-09-10T07:11:57+00:00","dateModified":"2025-03-20T14:02:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/how-to-open-images-in-a-lightbox\/"},"wordCount":109,"publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/how-to-open-images-in-a-lightbox\/","url":"https:\/\/www.open-user-map.com\/knowledge-base\/how-to-open-images-in-a-lightbox\/","name":"Comment ouvrir des images dans une bo\u00eete \u00e0 lumi\u00e8re ? - Open User Map","isPartOf":{"@id":"https:\/\/www.open-user-map.com\/#website"},"datePublished":"2024-09-10T07:11:57+00:00","dateModified":"2025-03-20T14:02:11+00:00","breadcrumb":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/how-to-open-images-in-a-lightbox\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.open-user-map.com\/knowledge-base\/how-to-open-images-in-a-lightbox\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/how-to-open-images-in-a-lightbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.open-user-map.com\/"},{"@type":"ListItem","position":2,"name":"How to open images in a lightbox?"}]},{"@type":"WebSite","@id":"https:\/\/www.open-user-map.com\/#website","url":"https:\/\/www.open-user-map.com\/","name":"Open User Map","description":"Plugin WordPress Map","publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.open-user-map.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.open-user-map.com\/#organization","name":"Open User Map","url":"https:\/\/www.open-user-map.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","contentUrl":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","width":256,"height":256,"caption":"Open User Map"},"image":{"@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.open-user-map.com\/#\/schema\/person\/d9c8cbe470ae2702b6de61e0f73a7402","name":"Daniel Sch\u00f6nherr"}]}},"_links":{"self":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb\/5663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/comments?post=5663"}],"version-history":[{"count":2,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb\/5663\/revisions"}],"predecessor-version":[{"id":6070,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb\/5663\/revisions\/6070"}],"wp:attachment":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/media?parent=5663"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb-category?post=5663"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb-tag?post=5663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}