Steve's Gallery Helper

Description

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

1. Add a Gallery block to your content.
2. In the block settings sidebar, locate the Gallery Helper Settings panel.
3. Check Enable Lightbox.
4. Optional: set Slideshow Mode to Automatic for auto-advancing images.
5. On the front end, click any gallery image to open the lightbox.

Carousel

1. Add a Gallery block to your content.
2. In the block settings sidebar, locate the Gallery Helper Settings panel.
3. Set Display Mode to Carousel.
4. Choose Direction: Horizontal (side-to-side) or Vertical (top-to-bottom).
5. Optional: enable Auto-advance and set the Interval (ms) (default 3000).
6. On the front end, the gallery renders as a full-height image strip with prev/next buttons.

Dynamic Galleries

The plugin automatically handles galleries loaded dynamically (e.g. inside accordion blocks, tabs, AJAX-loaded content). No extra configuration required.