Lightbox with PhotoSwipe

If you want to display an image in it’s own lightbox which does not display other images from the same post or page, you can add the attribute data-lbwps-gid to the link element with a unique value for this image. This value must not be a number since numbers are already used internally. For example you could the file name of the image like this:

You can also add the same data-lbwps-gid attribute to multiple single images to combine them in the same lightbox.

Starting with release 3.1.14 this is also supported for Elementor image widgets and Elementor image carousel widgets.

Please note: the order of the parameters have changed in version 1.90.

You can either configure the pages/posts manually in the settings or you can use the filter lbwps_enabled . This filter gets the ID of the current page/post and if the lightbox is currently enabled ( true or false ). If the filter returns true , the lightbox will be used, if it returns false the lightbox will be disabled – which means, no scripts and stylesheets will be included at all on the current page/post.

// Disable Lightbox with PhotoSwipe on WooCommerce product pages function my_lbwps_enabled($enabled, $id) { if (function_exists('is_product')) { if (is_product()) return false; } return $enabled; } add_filter('lbwps_enabled', 'my_lbwps_enabled', 10, 2); How to modify the caption

lbwps_caption_caption lbwps_caption_title lbwps_caption_description lbwps_caption_filename lbwps_caption_exif

// Add copyright notice to caption title function my_lbwps_caption_title($title, $id) { return sprintf('%s<br>Copyright (c) %s Foobar', $title, date('Y')); } add_filter('lbwps_caption_title', 'my_lbwps_caption_title', 10, 2); Changes with PhotoSwipe 5

1) Customizing the display of image counter and zoom button (this may be added in future updates).

3) Sharing options (some options may return in future updates).

Which styles are available depends on which PhotoSwipe version you use and what kind of caption.

Why is there no “zoom animation” when opening the lightbox?

Conflict with PublishPress Blocks (Advanced Gutenberg Blocks)

How to change the order of the images in the lightbox?

Why are my SVG images not displayed properly in the lightbox or not displayed at all?

Lightbox with PhotoSwipe tries to determine the size based on the width/height attribute of the root element in the SVG structure. If these attributes are not available, the viewbox is used. If none of these values are present, the SVG can not be displayed in the lightbox.

Licensing

Source and contributing

The main repository for the source code can be found at https://codeberg.org/askaaron/lightbox-photoswipe .