Using the gallery features

This walkthrough turns a fresh install into a richer product gallery: hover zoom and lightbox on every product, plus a featured video on the products that have one.

1. Enable zoom and the lightbox

Open the Reel menu and turn on hover zoom and the lightbox. These apply to every single product page that has a gallery — no per-product setup needed. Set the zoom scale with the live control until the magnification feels right for your image sizes, and if most of your traffic is mobile, enable skip hover zoom on touch devices.

2. Add a featured video to a product

Decide where videos should appear with the video position setting (after the gallery, or before the summary). Then on a product, set the _reel_video_url meta to your video:

• A self-hosted file (.mp4, .m4v, .webm, .ogv) plays in WordPress’s native video player.
• An oEmbed URL (YouTube, Vimeo and similar) is embedded automatically.

Optionally set _reel_video_title for a per-product heading, otherwise the default heading and intro from settings are used.

3. Confirm on the product page

Open a product with a gallery and a video:

• Hover a gallery image — it magnifies within the frame.
• Click (or press Enter/Space) on an image — the lightbox opens full screen.
• The video appears in its 16:9 frame in the position you chose.

Placing the video outside the gallery

To show the video somewhere else — inside a tab, a long-form description, a custom layout — use the shortcode or block instead of relying on the gallery position:

[reel_video]

The Reel: Featured video block produces the same output in the block editor. Both render the current product’s video in the same reserved-space frame, so there is no layout shift wherever you place it.

Lightbox behaviour for keyboard and screen-reader users

The lightbox is fully keyboard operable:

• Open it with Enter or Space on a focused gallery image.
• Focus is trapped on the close control while it is open.
• Escape or a backdrop click closes it, and focus returns to the image you opened it from.
• The dialog is named, and the open control uses your custom accessible label, so assistive technology announces both clearly.
• With caption-from-alt-text on, the image’s alt copy is shown as a caption.

Performance notes

Reel ships a single small vanilla-JavaScript file, deferred and loaded in the footer, only on the single product page — there is no jQuery. The lightbox is a fixed overlay that starts hidden, the zoom transform is clipped to the gallery frame, and the video sits in a fixed-ratio frame that reserves its space before loading. Together that means Reel adds the gallery features with no Cumulative Layout Shift, and the styling respects prefers-reduced-motion.