Steve's Wordpress

Custom Plugins

Steve’s Gallery Helper

Turn the native WordPress gallery block to a clean lightbox of slides with one click. User can navigate slides by click, swipe, keyboard arrows, or automatic advancing. Styling has been kept minimal to easily adapt to your theme’s defaults, and coding is unobtrusive to prevent conflicts. WCAG 2.2 compliant. No dependencies, no fluff and no bloat.

One click creates a simple carousel with the native Gutenberg gallery. (with lightbox)

Or let the gallery arrange the images and just use the lightbox settings.

Gallery Inside Details Block

Caption Goes Here

Caption Goes Here
Active 1.7.4 7 KB updated: 06/24/2026 8:56 AM Find On WordPress

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
  • Upload the steves-gallery-helper directory to /wp-content/plugins/, or upload the zip via Plugins → Add New → Upload Plugin.
  • Activate the plugin through the Plugins screen.
  • Add a Gallery block to any post, page, or custom post type.
  • Open the block settings sidebar and expand Gallery Helper Settings.
  • Toggle Enable Lightbox and/or set Display Mode to Carousel.
  • Publish and enjoy.

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

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

  • = 1.7.4 =
  • * New: Carousel display mode — display gallery images as a horizontal or vertical image strip with prev/next navigation, swipe support, keyboard arrows, and optional auto-advance with configurable interval.
  • * New: "Display Mode" setting (Grid / Carousel) in the Gallery Helper Settings panel.
  • * New: "Direction" setting (Horizontal / Vertical) for carousel orientation.
  • * New: "Auto-advance" toggle and interval control for the carousel.
  • * New: Carousel integrates with the existing lightbox — enable both for click-to-lightbox from carousel images.
  • * New: CSS for carousel layout — height-justified, no-cropping image display with responsive breakpoints.
  • * New: Mouse drag and touch swipe support for carousel navigation.
  • Gallery block with the Gallery Helper Settings panel open in the editor sidebar.
    Gallery block with the Gallery Helper Settings panel open in the editor sidebar.
  • Lightbox overlay showing an image with prev/next/close controls.
    Lightbox overlay showing an image with prev/next/close controls.
  • Horizontal carousel with prev/next navigation buttons.
    Horizontal carousel with prev/next navigation buttons.
  • Vertical carousel layout.
    Vertical carousel layout.