Lightbox with PhotoSwipe 5 (overlay caption)

The following example shows using PhotoSwipe 5 with overlay captions. This type of caption will be displayed above the image and will also be removed when the UI is hidden.

To see another variation with “dynamic” caption, see this example.

About PhotoSwipe 5

PhotoSwipe 5 by Dmytro Semenov has much better support for mobile devices with iOS 13 and better performance due to its modular structure. It is also easier to extend its functionality using plugins or event handlers.

Due to changes in PhotoSwipe 5 some features will likely never be available in Lightbox with PhotoSwipe:

  • URL navigation where the URL gets modified with each image displayed, so you can link to images in the lighbox directly as in PhotoSwipe 4. So far linking to an image is supported to keep existing links valid, but PhotoSwipe itself does not support the history API any more.
  • “Swipe” animation in desktop mode.
  • Custom modes for mouse wheel (the wheel is now always used for specific operations like Strg+wheel for zooming and scrolling in zoomed state).

Since PhotoSwipe 5 is now modular, it will now only be used in its original form and only be extended by plugins.

Lightbox with PhotoSwipe 5 (dynamic caption)

The following examples use the “dynamic caption” with automatic placement beside or below the image. To see another variation with “overlay” caption, see this example.

Single image with caption:

This is a place in Augsburg.

A gallery with the Gutenberg gallery block:

Images in a tiled gallery (some images are quite large and may take a while to load!):

About PhotoSwipe 5

PhotoSwipe 5 by Dmytro Semenov has much better support for mobile devices with iOS 13 and better performance due to its modular structure. It is also easier to extend its functionality using plugins or event handlers.

Due to changes in PhotoSwipe 5 some features will likely never be available in Lightbox with PhotoSwipe:

  • URL navigation where the URL gets modified with each image displayed, so you can link to images in the lighbox directly as in PhotoSwipe 4. So far linking to an image is supported to keep existing links valid, but PhotoSwipe itself does not support the history API any more.
  • “Swipe” animation in desktop mode.
  • Custom modes for mouse wheel (the wheel is now always used for specific operations like Strg+wheel for zooming and scrolling in zoomed state).

Since PhotoSwipe 5 is now modular, it will now only be used in its original form and only be extended by plugins.

Timed Content – Show something after a delay

Using client side rules you can also show content after some delay.

The code for this:

[timed-content-client show="0:20:0"]Hello! This will be visible after 20 seconds.[/timed-content-client]

This will cause to display new content below after 20 seconds:

Tiled gallery (Jetpack as of 2022-01)

This is a Jetpack tiled gallery – however there is a bug: the gallery should link to the media files, but it only links to a smaller version of it. Due to this problem also captions may not be visible any longer on PhotoSwipe as the image name in the link is also used to get the caption from the database, which needs the original name without size parameter.

Lightbox with PhotoSwipe 3.2.8 introduced a mitigation for this bug which tries to remove the size parameters in image links. This can be disabled if it causes any problems.

Also see https://github.com/Automattic/jetpack/issues/16940