Lightbox with PhotoSwipe

Description

This plugin is a simple integration of PhotoSwipe to WordPress. All linked images in a post or page will be displayed using PhotoSwipe, regardless if they are part of a gallery or single images. Just make sure that you link the image or gallery directly to the media and not the attachment page (in galleries the option link=file should be set).

More about PhotoSwipe see here: http://photoswipe.com

Screenshots

  • Configuration options in the backend
  • Example for the use in the frontend

Installation

  1. Extract the contents of the package to the /wp-content/plugins/lightbox-photoswipe directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

FAQ

Using the plugin

All linked images in a post or page will be displayed using PhotoSwipe, regardless if they are part of a gallery or single images.

Make sure that you link the image or gallery directly to the media and not the attachment page (in galleries the option link=file should be set).

How to disable the plugin in certain pages/posts

Some other plugins use PhotoSwipe as well and there may be a conflict – for example with the product pages of WooCommerce.

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.

Example:

// Disable Lightbox with PhotoSwipe on WooCommerce product pages

function my_lbwps_enabled($id, $enabled)
{
    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 PhotoSwipe markup

If you want to modify the existing PhotoSwipe markup, you can use the filter lbwps_markup. This filter gets one parameter with the existing markup and must return the modified markup to be used.

A “quick & dirty” example to add additional stuff in the header with the controls (CSS should never be inline – this is just to get a working example):

function my_lbwps_markup($markup)
{
    // Add some additional elements
    $markup = str_replace(
        '<div class="pswp__top-bar">',
        '<div class="pswp__top-bar"><div style="position:absolute; width:100%; text-align:center; line-height:44px; font-size:13px; color:#fff; opacity: 0.75;">Our content</div>',
        $markup
    );
    return $markup;
}

add_filter('lbwps_markup', 'my_lbwps_markup', 10, 1);
Local changes in PhotoSwipe

The following changes are the differences to PhotoSwipe 4.0 as of 2018-11-08:

1) The default UI is based on a CSS file and a number of graphics in different formats. This CSS file got modified to provide a fix for WordPress themes which use elements with a quite high Z index which hide the controls of PhotoSwipe. By setting the Z index of the affected controls to the highest possible value, all controls stay visible in front.

2) There are four skins, which you can choose from. Every skin is based on the default UI with some modifications. “New” contains a modified “share” symbol while “solid” in the name indicates, that all controls have a solid background instead of a slight transparency.

3) When dragging the picture to the top, there is no additional fade out animation when closing the picture.

4) When looping is disabled, this also applies to the desktop view.

Licensing

To avoid any confusion: this plugin was published with the agreement of Dmitry Semenov.

Reviews

This is a good integration of PhotoSwipe

I previously used another PhotoSwipe plugin but it had no options and didn’t work on custom post type. This one works out the box in all contents. You have still the ability to disable it on the page or post you want using their ID. A great function to add would be to be able to disable it on selected categories or custom post type.
Thanks !

Simple, clair, efficace et avec zoom!

Lightbox très épurée gérant les écrans tactiles et le zoom dans les grandes images.
Intégration très réussie de Photoswipe dans le plugin par le développeur ! Avec un bon support, qui a permis de corriger quelques bugs dans le css avec certains thèmes WordPress!

Really liking this!

Finally a photoswipe plugin for WordPress. Thanks! It’s working really well for me so far, with no problems.

I have one enhancement request: I’ll post on the support forum.

Thanks again for a really nice (and long-needed) plugin.

Read all 6 reviews

Contributors & Developers

“Lightbox with PhotoSwipe” is open source software. The following people have contributed to this plugin.

Contributors

“Lightbox with PhotoSwipe” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Lightbox with PhotoSwipe” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.73

  • Fixed non working option for “allow infinite loop”.

1.72

  • Fixed non working option for “pinch to close”.

1.71

  • Reading captions from the database can be disabled.
  • Captions from the database are now texturized to have proper curly quotes, dashes etc..
  • Additional option to enable or disable pinch to close gesture.
  • Additional option to enable or disable infinite loop.
  • Change in PhotoSwipe: disabling loop option now also applies to the desktop view.

1.70

  • Using client side captions from the gallery, if image meta data can not be loaded using its URL.

1.69

  • Fixed supressing of lightbox UI if the plugin is disabled by a setting or the lbwps_enabled filter.

1.68

  • Fixed supressing of script output if the plugin is disabled by a setting or the lbwps_enabled filter.

1.67

  • Fixed missing captions if images got added using HTTPS and served via HTTP or vice versa
  • Improved handling of multilined captions

1.65

  • Fixed caption handling: captions should now always be displayed if enabled

1.64

  • Zoom button can be disabled
  • Captions can be disabled
  • Spacing between pictures can be adjusted
  • Refactoring for better PSR compliance
  • Fix in PhotoSwipe: images will now fade out, when closing them by dragging them vertically up or down.

1.63

  • Fixed missing captions in lightbox for “Cleaner Gallery”.
  • Added documentation about the local changes in PhotoSwipe

1.61

  • Added filter to modify the PhotoSwipe markup, if needed.

1.60

  • Added selectable skins and new “share” symbol in PhotoSwipe.
  • Added filter for disabling the lightbox if needed.

1.52

  • Fixed an issue with opening images using URL parameters.

1.51

  • Improved handling of browser history: URLs which refer to specific images will open the lightbox as well.
  • Some frontend code refactoring.

1.50

  • Added more customization options for PhotoSwipe.

1.40

  • Fixed an issue with “will-change” CSS hints.
  • Fixed a potential issue with internal options names.
  • Renamed JavaScript object which is used by WordPress to pass translated labels in the frontend from object_name to lightbox_photoswipe.
  • Sharing options can now be configured.
  • Layout modifications for the sharing menu.

1.30

  • Added “share” button in frontend.

1.20

  • Added a setting in the backend to exclude the lightbox on certain pages or posts.

1.14

  • Fixed an issue with additional attributes in the surrounding anchor element of pictures (thanks to user conducivedata for the suggestion).

1.13

  • Fixed a problem which may occur when activating the plugin after an older version already had been in use.

1.11

  • Fix in PhotoSwipe: when closing an image by zooming out, the image will not be displayed once again to fade out.

1.10

  • Fixed problems with Firefox for Android which needs button elements to handle the UI properly.

1.9

  • Modified CSS rules to make sure that the lightbox is not covered by other elements.

1.8

  • Change UI elements from button to div to avoid layout problems with certain themes (Hamilton, Oria).

1.7

  • Fix in PhotoSwipe: when closing an image by a vertical drag, the image was displayed again once to fade out, even though it was already moved out of the view. Now the image will just be closed and not be faded out after dragging it up or down.

1.6

  • Added workaround for pictures served by Jetpack Photon.
  • Code refactoring.

1.5

  • Changed multisite handling.

1.4

  • Fixed an upgrade/installation issue.

1.3

  • Fixed an upgrade issue.

1.2

  • Fixed a database issue.

1.1

  • Added missing text-domain header for proper localization support.

1.0

  • Initial release.