About this plugin
Gallery Helper extends the native WordPress Gallery block ( core/gallery ) with two premium display modes — Lightbox and Carousel — without adding any jQuery dependency.
Lightbox Mode
Click any gallery image to open it in a full-screen overlay with:
– Previous / Next navigation via on-screen buttons, keyboard arrow keys, touch swipe, or mouse drag
– Automatic slideshow mode that advances images every 3 seconds (pauses on click)
– Fade transitions on swipe gestures for a native feel
– Accessibility: ARIA roles, focus trapping, keyboard Escape to close, screen reader support
– Responsive: navigation buttons hide on mobile (swipe instead)
Carousel Mode
Display your gallery images as a full-height, single-image strip with:
– Horizontal orientation (default) or Vertical orientation
– Height-justified, no-cropping display — each image fills the container height while preserving its natural aspect ratio via object-fit: contain
– Prev / Next navigation via on-screen buttons, keyboard arrows, mouse drag, or touch swipe
– Auto-advance mode with configurable interval (pauses on hover/focus, resumes on leave)
– Reacts to window resize — re-centers the current slide
– Lightbox integration — when both Carousel and Lightbox are enabled, clicking a carousel image opens the lightbox with full navigation
Key Design Principles
- No jQuery — uses vanilla JavaScript throughout
- Lightweight — CSS and JS only enqueue when a gallery block uses the helper
- Unobtrusive — leaves the editor experience untouched; adds a single “Gallery Helper Settings” panel to the block inspector
- Dynamic content compatible — uses MutationObserver to support galleries loaded via AJAX, accordions, tabs, or other dynamic UIs
Usage
Lightbox
- Add a Gallery block to your content.
- In the block settings sidebar, locate the Gallery Helper Settings panel.
- Check Enable Lightbox.
- Optional: set Slideshow Mode to Automatic for auto-advancing images.
- On the front end, click any gallery image to open the lightbox.
Carousel
- Add a Gallery block to your content.
- In the block settings sidebar, locate the Gallery Helper Settings panel.
- Set Display Mode to Carousel.
- Choose Direction: Horizontal (side-to-side) or Vertical (top-to-bottom).
- Optional: enable Auto-advance and set the Interval (ms) (default 3000).
- On the front end, the gallery renders as a full-height image strip with prev/next buttons.
Dynamic Galleries
g. inside accordion blocks, tabs, AJAX-loaded content). No extra configuration required.