Enable desktop sliding for PhotoSwipe 5

assets/ps5/frontend.js

@@ -347,9 +347,9 @@ let lbwpsInit = function(domUpdate) {
         options.history = lbwpsOptions.history === '1';
         options.zoomEl = lbwpsOptions.show_zoom === '1';
         options.tapToToggleControls = lbwpsOptions.taptotoggle === '1';
-        options.desktopSlider = lbwpsOptions.desktop_slider === '1';
         */
 
+
         const lightbox = new PhotoSwipeLightbox(options);
         lightbox.on('destroy', () => {
             const pswpElements = document.getElementsByClassName('pswp__scroll-wrap');
@@ -405,6 +405,25 @@ let lbwpsInit = function(domUpdate) {
             );
         }
 
+        // Add sliding in desktop mode
+        options.desktopSlider = lbwpsOptions.desktop_slider === '1';
+
+        if (options.desktopSlider) {
+            const lbwpsGoTo = (index, animate = false) => {
+                const pwsp = lightbox.pswp;
+                index = pwsp.getLoopedIndex(index);
+                const indexChanged = pwsp.mainScroll.moveIndexBy(index - pwsp.potentialIndex, animate);
+
+                if (indexChanged) {
+                    pwsp.dispatch('afterGoto');
+                }
+            }
+            lightbox.on('uiRegister', () => {
+                lightbox.pswp.next = () => lbwpsGoTo(lightbox.pswp.potentialIndex + 1, true);
+                lightbox.pswp.prev = () => lbwpsGoTo(lightbox.pswp.potentialIndex - 1, true);
+            });
+        }
+
         lightbox.init();
         if (lbwpsOptions.hide_scrollbars === '1') {
             hideScrollbar();

lightbox-photoswipe.php

@@ -3,7 +3,7 @@
 Plugin Name: Lightbox with PhotoSwipe
 Plugin URI: https://wordpress.org/plugins/lightbox-photoswipe/
 Description: Lightbox with PhotoSwipe
-Version: 5.0.44
+Version: 5.1.0
 Author: Arno Welzel
 Author URI: http://arnowelzel.de
 Text Domain: lightbox-photoswipe

readme.txt

@@ -4,7 +4,7 @@ Contributors: awelzel
 Tags: attachments, images, gallery, lightbox, fancybox, photoswipe
 Requires at least: 5.3
 Tested up to: 6.3
-Stable tag: 5.0.44
+Stable tag: 5.1.0
 Donate link: https://paypal.me/ArnoWelzel
 License: GPLv2
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -219,6 +219,13 @@ If you change any of the stylesheets or frontend scripts in `src/js` or `src/lib
 
 == Changelog ==
 
+= 5.1.0 =
+
+PhotoSwipe 5 integration:
+
+* Updated PhtooSwipe to version 5.4.2.
+* Added desktop sliding similar to PhotoSwipe 4.
+
 = 5.0.44 =
 
 * Fixed a compatibility issue with WPML. Images should now also be recognized as "local" when they are used on a translated version of the website.

src/LightboxPhotoSwipe/LightboxPhotoSwipe.php

@@ -11,7 +11,7 @@
  */
 class LightboxPhotoSwipe
 {
-    const VERSION = '5.0.44';
+    const VERSION = '5.1.0';
     const SLUG = 'lightbox-photoswipe';
     const META_VERSION = '12';
     const CACHE_EXPIRE_IMG_DETAILS = 86400;

templates/options-tab5.inc.php

@@ -1,12 +1,12 @@
 <div id="lbwps-tab-5" style="display:none;">
     <div>
         <table class="form-table">
-            <tr class="lbwps-ver4">
+            <tr>
                 <th scope="row">
                     <?php echo __('General', 'lightbox-photoswipe'); ?>
                 </th>
                 <td>
-                    <label class="lbwps-ver4"><?php $this->uiControlCheckbox('fulldesktop'); ?> <?php echo __('Full picture size in desktop view', 'lightbox-photoswipe'); ?></label><br>
+                    <label class="lbwps-ver4"><?php $this->uiControlCheckbox('fulldesktop'); ?> <?php echo __('Full picture size in desktop view', 'lightbox-photoswipe'); ?></label><br class="lbwps-ver4">
                     <label><?php $this->uiControlCheckbox('desktop_slider'); ?> <?php echo __('Use slide animation when switching images in desktop view', 'lightbox-photoswipe'); ?></label><br>
                     <label><?php $this->uiControlCheckbox('close_on_click'); ?> <?php echo __('Close the lightbox by clicking outside the image', 'lightbox-photoswipe'); ?></label>
                 </td>