Rado's Native Lightbox

Plugin Banner

Rado's Native Lightbox

by radogado

Download
Description

Rado’s Native Lightbox instantly upgrades every WordPress gallery into a beautiful, full-screen lightbox carousel. Just activate and go — your existing galleries are transformed automatically, no shortcodes to learn, no settings pages to configure.

Built on Native Carousel, it uses the browser’s own scroll-snapping instead of heavy animation libraries. The result is buttery-smooth swiping on phones, fluid keyboard navigation on desktops, and a total footprint of roughly 13 KB — smaller than a single thumbnail image.

Why this plugin?

  • Zero configuration — activate it and every gallery on your site becomes a lightbox carousel. Deactivate it and galleries revert to normal. Nothing is written to your database.
  • Truly lightweight — ~13 KB total (JS + CSS). No jQuery, no frameworks, no external requests. Your PageSpeed score stays intact.
  • Works with any theme — Twenty Twenty-Five, Astra, GeneratePress, or anything else. The plugin bundles everything it needs.
  • Accessible by default — full keyboard navigation, focus trapping in the lightbox, screen-reader labels on every control, and prefers-reduced-motion support.
  • Native scroll-snap — hardware-accelerated, 60 fps swiping powered by the browser itself, not JavaScript animation loops.
  • Dark mode aware — the lightbox overlay adapts to the visitor’s system color scheme automatically.

Features at a glance:

  • Full-screen lightbox with swipe, keyboard and mouse-wheel navigation
  • Compact thumbnail index strip with scrollable overflow
  • “Thumbnails only” toggle in both the Block Editor sidebar and Classic Editor settings
  • Endless (infinite loop) navigation
  • Lazy-loaded images with low-resolution placeholder blur while loading
  • Captions and alt text fully preserved
  • Featured-image click opens the matching gallery slide on single posts
  • Editor performance guard — caps image sizes in the block editor to prevent crashes with large galleries

How it works:

The plugin intercepts gallery rendering at display time and outputs Native Carousel HTML markup. Your post content is never modified — the transformation is purely visual and fully reversible.

Third-party source code

This plugin bundles minified assets from Native Carousel, an open-source carousel component (GPL-2.0-or-later).

The following files in assets/ are the minified production builds:

  • n-carousel.min.js — carousel runtime
  • n-carousel-preload.min.js — image preloader
  • n-carousel.min.css — carousel styles

The unminified, human-readable source is available in the GitHub repository linked above. No build tools are needed to work with this plugin’s own code — gallery-lightbox.css and the admin JavaScript files are shipped unminified and readable.

This plugin is also maintained as part of the niui theme project:
https://gitlab.com/spacest/niui/-/tree/main/rados-native-lightbox

  1. Upload the rados-native-lightbox folder to /wp-content/plugins/.
  2. Activate the plugin through the Plugins menu in WordPress.
  3. Your galleries are now lightbox carousels — no configuration needed.
Does this work with any theme?

Yes. The plugin bundles its own JavaScript and CSS — no special theme support is needed. It has been tested with Twenty Twenty-Five and other popular themes.

Will it slow down my site?

No. The entire plugin is about 13 KB (minified JS + CSS combined). There are no external HTTP requests, no jQuery dependency, and no render-blocking resources. The JavaScript loads in the footer and images are lazy-loaded.

What happens if I deactivate the plugin?

Galleries revert to WordPress’s default rendering instantly. The plugin never modifies your post content — the transformation happens at display time only, so there is nothing to clean up.

How do I switch between thumbnails-only and full slides?

Block Editor: Select the gallery block, open the sidebar, and toggle “Thumbnails only” under the Native Carousel panel.

Classic Editor: Open the gallery settings modal and use the “Thumbnails only” checkbox.

Does this work with the Classic Editor plugin?

Yes. The plugin supports both the block editor (Gutenberg) and the Classic Editor.

Is the lightbox accessible?

Yes. The carousel supports full keyboard navigation (arrow keys, Home, End, Escape to close), traps focus inside the lightbox when open, provides screen-reader labels on all controls, and respects the prefers-reduced-motion system setting.

Can I style the controls to match my theme?

Yes. The carousel controls are styled via CSS custom properties. Add these to your theme’s CSS to customize the look:

--nui-control-bg (button background), `--nui-control-color` (button icon/text), `--nui-control-highlight` (selected thumbnail ring), `--nui-border-radius` (button rounding).

What is Native Carousel?

Native Carousel is a standalone, open-source carousel component that uses the browser’s native scroll-snapping instead of JavaScript animation. It is lightweight, accessible, and dependency-free.

1.0.0

  • Initial release.
  • Block gallery (core/gallery) transformation via render_block filter.
  • Classic shortcode transformation via post_gallery filter.
  • “Thumbnails only” toggle for Block Editor and Classic Editor.
  • Bundled Native Carousel assets — works with any theme.
  • Editor image size capping to improve performance with large galleries.
  • Featured-image-to-lightbox click handler for single posts.
Back to top