Create a lightbox gallery

  • media
  • gallery
  • lightbox
  • images
  • blocks

Updated

To make gallery photos open full size when clicked, select the Gallery block, click its Link icon, and choose Enlarge on click. A lightbox opens a photo large over a darkened page when a visitor clicks it. In a gallery, visitors can step through the other photos without leaving the page, then close the lightbox to carry on reading. It suits portfolios, project pages, event photos, and product details.

You don't need a plugin. The Gallery block does it with one setting.

Add the gallery

  1. Open the page in the editor and click +, or type /gallery on an empty line.
  2. Choose Gallery.
  3. Click Upload to add new photos, or Media Library to choose ones you've already uploaded. Select several, then click Create a new gallery and Insert gallery.

Size your photos before uploading so they look sharp without slowing the page. See Best image size and format for your website.

How do I turn on the lightbox?

The setting belongs to the whole gallery, not to each photo, so select the gallery first.

  1. Click any photo in the gallery, then click Select parent block at the left end of the toolbar. You can also select Gallery in List View.
  2. In the gallery's toolbar, click the Link icon.
  3. Choose Enlarge on click, WordPress's built-in lightbox. On a Dirigible site, you can choose Link images to media files instead to use Dirigible's lightbox (see below).
  4. Click Update (or Publish).

On the live page, click a photo to check it opens large over the page.

Whichever you pick, use it for every gallery so they all behave the same.

Can a single image open in a lightbox?

The Image block works the same way: click the Link icon in its toolbar and choose Enlarge on click. On a Dirigible site, Link to image file opens Dirigible's lightbox.

If your site runs on Dirigible

  • Dirigible's lightbox: with Link images to media files, Dirigible opens the photo in its own lightbox instead of sending visitors to the image file. It has previous and next arrows for galleries and works with the keyboard: arrow keys move between photos and Esc closes it. A photo's own caption shows in the lightbox (click the photo and use Add caption in its toolbar); a caption on the whole gallery doesn't.
  • Light or dark: choose the lightbox background under Appearance → Customize → Settings → General → Lightbox Theme. Dark is the default; Light suits bright, airy sites.
  • Gallery styles: the Gallery block's Styles panel adds Dirigible layouts: Compact, Rounded, Photos, Packery, and Tiered. The lightbox works with all of them.