--- title: "Creating Gallery Lightboxes" id: "196432" type: "knowledgebase" slug: "foobox-gallery-lightboxes-block-editor" published_at: "2026-07-24T09:19:31+00:00" modified_at: "2026-07-24T10:29:11+00:00" url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-gallery-lightboxes-block-editor/" markdown_url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-gallery-lightboxes-block-editor.md" excerpt: "Use a core Gallery block to create a navigable FooBox collection. Configure the outer Gallery block once; FooBox mirrors its settings to the child Image blocks when the post is saved." taxonomy_knowledgebase_cat: - "Block Editor" --- [Block Editor](https://fooplugins.com/documentation/foobox/block-editor/) # Creating Gallery 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 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 Gallery block to create a navigable FooBox collection. Configure the outer Gallery block once; FooBox mirrors its settings to the child Image blocks when the post is saved. ## 1. Add the Gallery Insert a **Gallery** block and select all the images that belong to it. ![Media Library selection for a nature Gallery block](https://fooplugins.com/wp-content/uploads/2026/07/13-gallery-media-selection.webp)Reorder or caption the images with WordPress’s normal Gallery and Image controls. ## 2. Select the outer Gallery block Click the gallery and use **Select parent block: Gallery**, the List View, or the breadcrumb at the bottom of the editor. The inspector heading must say **Gallery**, not Image. ![The outer Gallery block selected in Gutenberg](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201230%20900'%3E%3C/svg%3E)Selecting an individual child Image exposes image-specific controls and does not configure the whole gallery. ## 3. Enable FooBox and link every image Open **Block → Content → FooBox** and turn on **Enable FooBox**. If displayed, click **Link gallery images to media files**. ![Gallery control for linking all child images to their media files](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20520'%3E%3C/svg%3E)The Gallery remains normal core block markup. FooBox updates the child links rather than replacing the Gallery block. ## 4. Configure the gallery instance Set the gallery’s **Style**, **Theme**, **Opening effect**, and **Gallery group**. ![Outer Gallery FooBox style, theme, effect, and group settings](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20540'%3E%3C/svg%3E)The group keeps the child images together without relying on the legacy global `rel` grouping option. Opening effects require FooBox Pro; the other controls work in Free. ## Independent galleries on one page Each outer Gallery owns its FooBox configuration. This means two galleries can use different styles, themes, opening effects, and group names on the same page. ![Two Gallery blocks configured independently in the editor](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20750%20860'%3E%3C/svg%3E)For example, the first gallery can use Rounded/Light/Zoom in while the second uses Glass/Dark/Slide from bottom. The configuration belongs to the gallery that was clicked, even when another gallery appears earlier in the page and initializes first. ![The first gallery opening with its own lightbox appearance](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201000'%3E%3C/svg%3E)![The second gallery opening with a different per-gallery appearance](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201000'%3E%3C/svg%3E)## Editing after setup When images are added, removed, or reordered: 1. Select the outer Gallery again. 2. Confirm FooBox remains enabled. 3. Confirm the Gallery group is still correct. 4. Use **Link gallery images to media files** if new images are not linked. 5. Save the page so the parent settings are mirrored to all children. ## Troubleshooting - **The images open as separate items:** set one Gallery group on the outer Gallery and save the page. - **Only one image works:** link every gallery image to its media file. - **The panel says Image:** select the parent Gallery block. - **A second gallery uses the wrong appearance:** save with FooBox 2.8.3 or newer so each outer gallery’s instance keeps its own settings. 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/)