WordPress

WordPress already produces the markup SimpleLightbox expects: a link around a thumbnail that points to the full-size image. All that is left is to load two files and tell the lightbox which links to watch.

If you would rather not touch theme code, the WordPress plugin directory lists a SimpleLightbox plugin that loads the files and exposes the options in the dashboard. The manual method on this page takes a few minutes and gives you full control over every option.

A lightbox can only open what the link points to. In the Gallery block open the block settings and set Link to to Media File; for a single Image block use the link button in the toolbar and choose the image file. Classic galleries do the same with the shortcode attribute link="file".

[gallery ids="12,13,14" link="file"]

Since WordPress 5.3 very large uploads are scaled down to 2560 pixels, so the linked file is big enough for a sharp full-screen view without being a multi-megabyte original.

Copy simple-lightbox.min.js and simple-lightbox.min.css into a simplelightbox folder of your child theme and add this to its functions.php:

add_action( 'wp_enqueue_scripts', function () {
    $dir = get_stylesheet_directory_uri() . '/simplelightbox';

    wp_enqueue_style( 'simplelightbox', $dir . '/simple-lightbox.min.css', array(), null );
    wp_enqueue_script( 'simplelightbox', $dir . '/simple-lightbox.min.js', array(), null, true );

    wp_add_inline_script( 'simplelightbox',
        "new SimpleLightbox('.wp-block-gallery a, .wp-block-image a, .gallery a');"
    );
} );

The last argument of wp_enqueue_script loads the script in the footer, and wp_add_inline_script prints the start-up call right after it. Links that do not point to an image are skipped by the fileExt check, so a broad selector is safe. Current builds already accept WebP and AVIF; with an older build add them to fileExt yourself.

Block captions are not stored in the title attribute but in a <figcaption> next to the link. Pass a function as captionSelector — it receives the link and returns the element to read — and switch captionType to text:

new SimpleLightbox('.wp-block-gallery a', {
    captionSelector: function (link) {
        return link.parentNode.querySelector('figcaption');
    },
    captionType: 'text'
});

The three photos below use exactly the markup the Gallery block produces, captions included:

One selector turns every image on the page into a single slideshow. When a post contains several galleries that should be browsed separately, give each one its own selector — the same idea as multiple lightboxes on one page:

document.querySelectorAll('.wp-block-gallery').forEach(function (gallery, i) {
    gallery.classList.add('sl-gallery-' + i);
    new SimpleLightbox('.sl-gallery-' + i + ' a');
});

• The image opens on a new page. The script is not loaded or starts before the links exist — check that it is enqueued in the footer.
• Links point to an attachment page. Change Link to to Media File; attachment pages are HTML, not images.
• Two lightboxes open at once. The theme or another plugin brings its own lightbox. Switch that one off before adding SimpleLightbox.
• A page builder loads images later. Call refresh() after the content has been inserted, as described in dynamic galleries.