--- title: "Creating Image Lightboxes" id: "196431" type: "knowledgebase" slug: "foobox-image-lightboxes-block-editor" published_at: "2026-07-24T09:19:30+00:00" modified_at: "2026-07-24T10:27:32+00:00" url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-image-lightboxes-block-editor/" markdown_url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-image-lightboxes-block-editor.md" excerpt: "Use a core Image block when the image itself should open FooBox. Image lightboxes, captions, styles, themes, groups, and size controls work in FooBox Free. Opening effects and the large-image panning interaction require FooBox Pro." taxonomy_knowledgebase_cat: - "Block Editor" --- [Block Editor](https://fooplugins.com/documentation/foobox/block-editor/) # Creating Image Lightboxes ## Related Articles - [Getting Started with FooBox in the Block Editor](https://fooplugins.com/documentation/foobox/block-editor/foobox-block-editor-getting-started/) - [Creating Gallery Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-gallery-lightboxes-block-editor/) - [Creating Video and Iframe Lightboxes (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-video-iframe-lightboxes/) - [Creating Button Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-button-lightboxes-block-editor/) - [Opening Hidden Block Content (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-hidden-block-content/) - [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/) Use a core Image block when the image itself should open FooBox. Image lightboxes, captions, styles, themes, groups, and size controls work in FooBox Free. Opening effects and the large-image panning interaction require FooBox Pro. ## 1. Add an Image block Insert an **Image** block and choose an image from the Media Library. ![WordPress Media Library with nature images ready to select](https://fooplugins.com/wp-content/uploads/2026/07/05-select-nature-image.webp)Use descriptive alternative text for accessibility. The Image block’s alternative text is separate from the optional FooBox caption fields. ## 2. Enable FooBox and link the media file Select the Image block, open **Block → Content → FooBox**, and turn on **Enable FooBox**. FooBox needs a target URL. If the image is not linked to its media file, click **Link image to media file** in the FooBox panel. You can also use the native Image block link control and choose **Link to image file**. ![Image block showing the FooBox media-link requirement](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20455'%3E%3C/svg%3E)The page displays the selected image size, while the link opens the original media file in FooBox. ## 3. Set the lightbox dimensions Use **Width** and **Height** to define the intended lightbox size. Use **Maximum image width** and **Maximum image height** to limit how large the image may be rendered. ![FooBox width, height, and maximum image dimension controls](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20425'%3E%3C/svg%3E)Leave a field empty to inherit the FooBox defaults. Dimensions are saved on this Image block only. ## 4. Choose the appearance Choose a **Style** and **Theme** for this image. The available styles are Default, Rounded, Flat, Metro, and Glass; the themes are Default, Light, and Dark. **Opening effect** provides animated open and close transitions in FooBox Pro. The field remains visible in Free so content can be configured before upgrading. ![Image-specific Style, Theme, and Opening effect controls](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20245'%3E%3C/svg%3E)## 5. Add grouping and captions Use **Gallery group** when this image should navigate with other FooBox triggers. Every item in the same collection must use exactly the same group value. Fill in **Caption title** and **Caption description** when the lightbox needs wording different from the attachment metadata. ![Gallery group and explicit caption fields for an Image block](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20365'%3E%3C/svg%3E)Caption titles and descriptions use FooBox’s normal caption formatting on the frontend. ## 6. Preview the result Save or preview the page, then select the image. Confirm that the full media file opens with the expected style, theme, dimensions, and caption. ![Nature image open in FooBox with a title and description](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201000'%3E%3C/svg%3E)## Large-image panning (Pro) For an image that is larger than the lightbox viewport: 1. Select the Image block and enable FooBox. 2. Link it to the media file. 3. Turn on **Enable large image panning**. 4. Set the lightbox Width and Height. 5. Optionally cap the source with Maximum image width and Maximum image height. ![Enable large image panning and maximum size controls](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20390%20580'%3E%3C/svg%3E)On the frontend, FooBox Pro’s panning add-on lets visitors explore the oversized image instead of forcing the entire image into the viewport. The overview position is controlled in the FooBox Pro settings. ![A large portrait image using FooBox panning on the frontend](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201000'%3E%3C/svg%3E)## Troubleshooting - **The browser opens the image directly:** enable FooBox on the Image block and confirm FooBox assets are enabled for the page. - **Nothing happens:** verify the Image block links to the media file. - **The wrong caption appears:** fill the explicit FooBox caption fields or clear them to use the normal attachment-derived caption. - **An opening effect or panning does not run in Free:** these frontend behaviors 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/)