{"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\/de\/knowledge-base\/how-to-open-images-in-a-lightbox\/","title":{"rendered":"Wie \u00f6ffnet man Bilder in einem Leuchtkasten?"},"content":{"rendered":"

Sie k\u00f6nnen die oum_location_bubble_image<\/strong> Hook, um die Ausgabe des Standortbildes zu manipulieren. So k\u00f6nnen Sie zum Beispiel eine Lightbox-Funktion hinzuf\u00fcgen. <\/p>\n\n\n\n

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

Beispiel: Leuchtkasten mit WP Featherlight<\/h2>\n\n\n\n

Ich w\u00fcrde empfehlen, die WP Featherlight-Plugin<\/a> um einen Lightbox-Effekt f\u00fcr Bilder zu erhalten. Und mit dem folgenden PHP-Skript (f\u00fcgen Sie es in die functions.php Ihres Themes ein oder verwenden Sie ein Code Snippet Plugin) k\u00f6nnen Sie den Lightbox-Effekt f\u00fcr die Standortbilder aktivieren. Es f\u00fcgt den data-featherlight=\"image\"<\/mark> Attribut zu den Bildern hinzuf\u00fcgen.<\/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
Beispiel: Hinzuf\u00fcgen einer benutzerdefinierten Klasse zu Bildern<\/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
Beispiel: Bilder in einen Link einbinden<\/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":"
Sie k\u00f6nnen den oum_location_bubble_image-Hook verwenden, um die Ausgabe des Standortbildes zu manipulieren. So k\u00f6nnen Sie zum Beispiel eine Lightbox-Funktion hinzuf\u00fcgen. Beispiel: Lightbox mit WP Featherlight Ich w\u00fcrde empfehlen, das WP Featherlight Plugin zu verwenden, um einen Lightbox-Effekt f\u00fcr Bilder zu erhalten. Und mit dem folgenden PHP-Skript (f\u00fcgen Sie es zu Ihrem Theme ... Fortsetzung<\/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\/de\/knowledge-base\/how-to-open-images-in-a-lightbox\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"1\u00a0Minute\" \/>\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\":108,\"publisher\":{\"@id\":\"https:\/\/www.open-user-map.com\/#organization\"},\"inLanguage\":\"de\"},{\"@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\":\"de\",\"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\":\"de\"},{\"@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\":\"de\",\"@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":"Wie \u00f6ffnet man Bilder in einer Lightbox? \u2013 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\/de\/knowledge-base\/how-to-open-images-in-a-lightbox\/","og_locale":"de_DE","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\/de\/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":{"Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"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":108,"publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"inLanguage":"de"},{"@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":"Wie \u00f6ffnet man Bilder in einer Lightbox? \u2013 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":"de","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 Karten-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":"de"},{"@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":"de","@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\/de\/wp-json\/wp\/v2\/ht-kb\/5663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/comments?post=5663"}],"version-history":[{"count":2,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb\/5663\/revisions"}],"predecessor-version":[{"id":6070,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb\/5663\/revisions\/6070"}],"wp:attachment":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/media?parent=5663"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb-category?post=5663"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=5663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}