Lightbox with PhotoSwipe

This plugin integrates the JavaScript library PhotoSwipe to display linked images in posts or pages. All pictures will be used, regardless if they are part of a gallery or single images.

Installation

Manually

The manual installation consists of three steps:

  1. Download the package from https://wordpress.org/plugins/lightbox-photoswipe/
  2. Unpack the content to the directory wp-content/plugins of your own WordPress installation so the plugin will finally be at wp-content/plugins/lightbox-photoswipe.
  3. Activate the plugin in the backend.

Using the WordPress repository

You may also install the plugin using the plugin manager in the WordPress backend. Use the title “Multicolumn Category Widget” to find the plugin in the online repository. WordPress will also notify you about updates.

Using the plugin

As soon as the plugin is activated all linked images will be display with PhotoSwipe. Just make sure, you link to the images directly and not to the attachement page. In galleries the parameter link=file should be set.

Disabling 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 );

Extending the markup

If you want to extend the existing markup of PhotoSwipe you can use the filter lbwps_markup(). This filter gets the existing markup as parameter and returns the modified version.

Example (note that CSS should never be inline – this is just to get a working example):

// Add an additional element in the header

function my_lbwps_markup($markup)
{
    $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);

Adding additional languages

Currently the languages German, English and Italian are supported.

If you want to add additional languages you can use  “Loco Translate”. The language files are in the folder languages. For English there is no file neccessary.

If you’d like your translation to be included in the next update, feel free to send me the respective po/mo files.