--- title: "Creating Button Lightboxes" id: "196434" type: "knowledgebase" slug: "foobox-button-lightboxes-block-editor" published_at: "2026-07-24T09:19:35+00:00" modified_at: "2026-07-24T10:30:18+00:00" url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-button-lightboxes-block-editor/" markdown_url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-button-lightboxes-block-editor.md" excerpt: "A core Button block can open media without showing a thumbnail on the page. Image targets and image auto-detection work in FooBox Free. HTML, iframe, and video handlers require FooBox Pro." taxonomy_knowledgebase_cat: - "Block Editor" --- [Block Editor](https://fooplugins.com/documentation/foobox/block-editor/) # Creating Button Lightboxes ## Related Articles - [Getting Started with FooBox in the Block Editor](https://fooplugins.com/documentation/foobox/block-editor/foobox-block-editor-getting-started/) - [Creating Image Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-image-lightboxes-block-editor/) - [Creating Gallery Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-gallery-lightboxes-block-editor/) - [Opening Hidden Block Content (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-hidden-block-content/) - [Creating Video and Iframe Lightboxes (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-video-iframe-lightboxes/) - [Creating Custom Lightbox Groups](https://fooplugins.com/documentation/foobox/block-editor/foobox-custom-lightbox-groups/) - [Using FooBox with the WordPress Core Lightbox](https://fooplugins.com/documentation/foobox/block-editor/foobox-wordpress-core-lightbox/) - [Opening Shortcodes and FooGallery in FooBox (Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-shortcodes-foogallery/) **Need more help?** Browse all documentation or open a support ticket. [All docs](/documentation/) [Support](/support/) A core Button block can open media without showing a thumbnail on the page. Image targets and image auto-detection work in FooBox Free. HTML, iframe, and video handlers require FooBox Pro. ## 1. Add and select a Button Add a **Buttons** block, enter the button label, and select the individual **Button** inside it. Open **Block → Content → FooBox** and turn on **Enable FooBox**. ## 2. Choose the content type The **Content type** menu offers: - **Auto-detect from URL** — FooBox selects the handler from the target URL. - **Image** — always treats the target as an image. - **HTML content** — opens an element on the page; requires Pro. - **Iframe** — embeds a page URL; requires Pro. - **Video** — opens a supported or self-hosted video; requires Pro. ![Button FooBox panel showing all available content types](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20440%20800'%3E%3C/svg%3E)For a straightforward image button, choose **Image** or **Auto-detect from URL**. ## 3. Select the target Enter an image URL in **Lightbox URL or target**, or click **Select from media library** and choose an attachment. FooBox fills the field with its media URL. ![Media Library opened from the Button block target picker](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20900%20470'%3E%3C/svg%3E)The URL used by FooBox is independent of the visible button label. ## 4. Configure dimensions and appearance Set Width, Height, Style, Theme, Gallery group, Caption title, and Caption description as needed. Opening effect is a FooBox Pro feature. ![Button configured to open a nature image with dimensions and appearance controls](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20370%20720'%3E%3C/svg%3E)Use the same Gallery group on this Button and other triggers if they should navigate as one collection. ## 5. Preview the Button Save or preview the page and click the Button. The target should open in FooBox while the Button remains the only visible trigger in the page content. ![An image opened in FooBox from a Button block](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201000'%3E%3C/svg%3E)## Choosing Auto versus Image - Use **Image** when the target must always use the image handler. - Use **Auto-detect from URL** for image links when you want FooBox to identify the target automatically. - For YouTube and supported video URLs, Auto can identify the video only when FooBox Pro’s video handlers are active. - Use an explicit Pro content type when a URL is ambiguous or when you need an iframe or HTML target. ## Troubleshooting - **The FooBox controls are missing:** select the individual Button, not only the outer Buttons container. - **The Button navigates away:** make sure Enable FooBox is on and the target URL is valid. - **A video, iframe, or HTML target does not open in Free:** those handlers require FooBox Pro. Resources ## Find the right next step Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages. ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Documentation Search setup guides, product docs, and troubleshooting articles. [Browse docs](/documentation/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Support Open a ticket with product details so we can help quickly. [Get support](/support/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Licensing Review account, renewal, refund, and license information. [View details](/licensing/)