Inline scanning stays fast
The page keeps its compact reading flow while users browse several thumbnails.
Lightbox
Use App Connect Lightbox to keep media browsing inline until the user asks for a larger preview, then control the overlay from one shared page-level component.
Introduction
The preview below shows the result first: inline gallery thumbnails, one shared lightbox, and a clean handoff into larger browsing only when the user asks for it.
Keep the gallery in the page until the user asks for a larger view
This gallery section is still the first layer. Users can scan thumbnails and captions in the page itself before they decide whether any asset deserves the larger overlay.
Use galleries for scanning and Lightbox for focused review
This pattern is strongest when a page has several media items but only some need close inspection. Keep the gallery inline for fast scanning, use Lightbox for one larger asset at a time, and prefer a slideshow instead when the content needs a forced sequence instead of free browsing.
Overlay review stays focused
Only the chosen asset expands, so the page does not have to dedicate full layout space to every item.
Free browsing, not forced sequence
Choose this pattern when users should compare or skip around, not when you need a fixed story order.
A gallery link is the item you configure
Start by selecting one thumbnail link in Design View. The lightbox behavior is added to that link in Properties, because the link is what opens the larger media preview.
Use the Properties panel for the selected link
Keep the thumbnail link selected and look at the Properties panel on the right. This is where the link settings stay visible, and the next control you need is Dynamic Attributes (+), where the lightbox behavior is added.
Lightbox in Dynamic Attributes (+)
The Dynamic Attributes (+) menu for the selected thumbnail link includes Open in Lightbox. This connects that gallery item to the shared lightbox overlay before you fine-tune the group and related options.
The page root hosts one shared Lightbox Options component
Insert Lightbox Options once near the top of the page structure, just below the app root or body. It owns fullscreen behavior, spinner style, animation, and buttons for every gallery item instead of repeating those settings on each link.
In Structure the shared component sits just below the page root
This is the placement to remember. Lightbox Options is a general page-level component, so it usually appears near the top of Structure under the app root or body, not as something you add repeatedly inside the gallery itself.
Treat Lightbox Options as one shared page-level setup
If you need to add it, think of this as one page-level setup step rather than a quick gallery-item insert. The gallery links themselves are configured later with Dynamic Attributes, while Lightbox Options stays as the single shared controller for the overlay.
Return to the anchors for the real Lightbox wiring
Once the shared Lightbox Options component exists near the top of the page, go back to the gallery links. Each anchor gets its own Open in Lightbox relationship and optional group name, which is the actual connection between the thumbnail and the shared overlay.
The gallery anchor shows the actual lightbox relationship
When the thumbnail link is selected, the Properties panel shows the part that matters: the anchor still behaves like normal page content, but its dmx-lightbox:studio_gallery relationship tells Wappler which shared lightbox group should open when the thumbnail is clicked.
Working in Wappler
Once the media page is open, inspect the two Lightbox layers that matter in Wappler: the shared Lightbox Options component that owns the overlay behavior and the anchor-level relationship that sends each thumbnail into the shared viewer.
The page-level Lightbox Options component centralizes overlay settings
The page-level Lightbox Options component is where fullscreen behavior, spinner style, animation, and visible buttons are configured once for the page. The gallery anchors do not duplicate those controls. They simply feed images into the shared overlay, which keeps the gallery markup light and the popup behavior consistent.
Fullscreen, spinner, animation, and buttons stay centralized here
With the shared Lightbox Options component selected, the Properties panel is where you decide whether the overlay opens fullscreen, which loading spinner appears, which transition animation is used, and whether the navigation buttons stay visible. These are page-level viewing rules, so set them once here instead of repeating them on every gallery link.
Conclusion
You now have the concrete Lightbox workflow in Wappler: keep the thumbnails in normal page layout, attach Open in Lightbox on the anchor, and centralize the overlay behavior in one shared Lightbox Options component.
Continue with performance or sequencing next
If the same page needs a looser editorial wall, continue into Masonry next. If the gallery assets start getting heavy, continue into Lazy Load Images so the page stays fast.
