Loads photoswipe from URL if hash is passed. #548.

package-lock.json

@@ -4886,7 +4886,8 @@
         },
         "ini": {
           "version": "1.3.5",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "dev": true,
           "optional": true
         },

src/assets/css/tainacan-gutenberg-block-item-gallery.css

@@ -290,15 +290,37 @@
 .tainacan-media-component__swiper-main + .tainacan-media-component__swiper-thumbs li.swiper-slide {
   cursor: pointer; }
 
-.tainacan-photoswipe-layer .pswp__bg {
+.tainacan-photoswipe-layer {
-  background-color: rgba(0, 0, 0, 0.85); }
+  --pswp-bg: var(--tainacan-lightbox-background, #000);
-.tainacan-photoswipe-layer .pswp__ui--fit .pswp__top-bar,
+  --pswp-error-text-color: var(--tainacan-lightbox-text-color, #f7f7f7);
-.tainacan-photoswipe-layer .pswp__ui--fit .pswp__caption {
+  --pswp-icon-color: var(--tainacan-lightbox-text-color, #fff); }
-  background-color: rgba(0, 0, 0, 0.7); }
+  .tainacan-photoswipe-layer .pswp__caption {
-.tainacan-photoswipe-layer .pswp__button--arrow--left::before,
+    bottom: 0;
-.tainacan-photoswipe-layer .pswp__button--arrow--right::before {
+    position: fixed;
+    padding: 8px;
+    width: 100%;
+    display: flex;
+    justify-content: center; }
+  .tainacan-photoswipe-layer .pswp__caption-inner {
+    opacity: 0.75;
+    background-color: var(--pswp-bg);
+    color: var(--pswp-icon-color);
+    text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
+    max-width: 920px;
+    padding: 12px;
+    line-height: 20px;
+    text-align: center;
+    font-size: 1em;
+    border-radius: 3px;
+    transition: opacity 0.4s ease; }
+    .tainacan-photoswipe-layer .pswp__caption-inner:hover {
+      opacity: 1.0; }
+  .tainacan-photoswipe-layer.pswp--zoomed-in .pswp__caption-inner {
+    opacity: 0.0; }
+  .tainacan-photoswipe-layer .pswp__button--arrow--left::before,
+  .tainacan-photoswipe-layer .pswp__button--arrow--right::before {
     background-color: transparent; }
-.tainacan-photoswipe-layer .pswp__container {
+  .tainacan-photoswipe-layer .pswp__container {
     width: 100%;
     height: 100%;
     display: flex;
@@ -364,7 +386,7 @@
       z-index: 99;
       padding: 1rem 4.33337vw;
       background: var(--tainacan-media-background, #ffffff);
-    border-radius: var(--borderRadius, 3px);
+      border-radius: 3px;
       word-wrap: break-word; }
     .tainacan-photoswipe-layer .pswp__container audio {
       background: black;
@@ -375,8 +397,9 @@
     .tainacan-photoswipe-layer .pswp__container video {
       min-height: 56px;
       max-width: 80%; }
-.tainacan-photoswipe-layer .pswp__top-bar .pswp__name {
+  .tainacan-photoswipe-layer .pswp__top-bar .pswp__name {
-  color: white;
+    color: var(--pswp-icon-color);
+    text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
     text-align: center;
     font-size: 1.125em;
     display: block;
@@ -390,12 +413,12 @@
     white-space: nowrap;
     line-height: 44px;
     padding: 0 10px; }
-.tainacan-photoswipe-layer .pswp__figure_caption {
+  .tainacan-photoswipe-layer .pswp__figure_caption {
     font-size: 0.875em;
     font-style: italic; }
-.tainacan-photoswipe-layer .pswp__description {
+  .tainacan-photoswipe-layer .pswp__description {
     font-size: 0.9375em; }
-.tainacan-photoswipe-layer .pswp__caption__center {
+  .tainacan-photoswipe-layer .pswp__caption__center {
     text-align: center;
     font-size: 1em;
     max-width: 800px; }

src/classes/theme-helper/template-tags.php

@@ -347,10 +347,6 @@ function tainacan_get_the_media_component(
 
 	if ( $args['has_media_main'] || $args['has_media_thumbs'] ) :
 	
-		// Modal lightbox layer for rendering photoswipe
-		if (!$args['disable_lightbox'])
-			add_action('wp_footer', 'tainacan_get_the_media_modal_layer');
-	
 		wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-item-gallery.css', array(), TAINACAN_VERSION);
 
 		?>
@@ -583,75 +579,6 @@ function tainacan_get_the_media_component_slide( $args = array() ) {
 	return $content;
 }
 
-/**
- * Div with content necessay to render the photowipe modal
- *
- * @return string
- */
-function tainacan_get_the_media_modal_layer() {
-?> 
-    <!-- Root element of PhotoSwipe lightbox. Must have class pswp. -->
-    <div class="tainacan-photoswipe-layer pswp" tabindex="-1" role="dialog" aria-hidden="true">
-
-        <!-- Background of PhotoSwipe. 
-                It's a separate element, as animating opacity is faster than rgba(). -->
-        <div class="pswp__bg"></div>
-
-        <!-- Slides wrapper with overflow:hidden. -->
-        <div class="pswp__scroll-wrap">
-
-            <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
-            <!-- don't modify these 3 pswp__item elements, data is added later on. -->
-            <div class="pswp__container">
-                <div class="pswp__item"></div>
-                <div class="pswp__item"></div>
-                <div class="pswp__item"></div>
-            </div>
-
-            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
-            <div class="pswp__ui pswp__ui--hidden">
-
-                <div class="pswp__top-bar">
-
-                    <!--  Controls are self-explanatory. Order can be changed. -->
-                    <div class="pswp__counter"></div>
-
-                    <div class="pswp__name"></div>
-
-                    <button class="pswp__button pswp__button--close" title="<?php __('Close modal (Esc)', 'tainacan') ?>"></button>
-                    <button class="pswp__button pswp__button--share" title="<?php __('Share', 'tainacan') ?>"></button>
-                    <button class="pswp__button pswp__button--fs" title="<?php __('Toggle fullscreen', 'tainacan') ?>"></button>
-                    <button class="pswp__button pswp__button--zoom" title="<?php __('Zoom in/out', 'tainacan') ?>"></button>
-
-                    <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
-                    <!-- element will get class pswp__preloader--active when preloader is running -->
-                    <div class="pswp__preloader">
-                        <div class="pswp__preloader__icn">
-                            <div class="pswp__preloader__cut">
-                                <div class="pswp__preloader__donut"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
-                    <div class="pswp__share-tooltip"></div>
-                </div>
-
-                <button class="pswp__button pswp__button--arrow--left" title="<?php __('Next', 'tainacan') ?>"></button>
-
-                <button class="pswp__button pswp__button--arrow--right" title="<?php __('Previous', 'tainacan') ?>"></button>
-
-                <div class="pswp__caption">
-                    <div class="pswp__caption__center"></div>
-                </div>
-            </div>
-        </div>
-
-    </div>
-<?php
-}
-
 /**
  * When visiting a collection archive or single, returns the collection url link
  *

src/views/gutenberg-blocks/blocks/item-gallery/style.scss

@@ -1,15 +1,3 @@
-$pswp__show-hide-transition-duration: 333ms !default;
-$pswp__controls-transition-duration: 333ms !default;
-$pswp__background-color: rgba(0,0,0, 0.8) !default;
-$pswp__placeholder-color: #222 !default;
-$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
-$pswp__root-z-index: 9999999 !default;
-$pswp__assets-path: '../images/' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
-$pswp__error-text-color: #CCC !default; // "Image not loaded" text color
-$pswp__include-minimal-style: true !default;
-
-// @import '../../../../../node_modules/photoswipe/dist/photoswipe.css';
-
 .item-gallery-edit-container {
     .tainacan-media-component {
         .swiper-slide,
@@ -391,12 +379,37 @@ $pswp__include-minimal-style: true !default;
 
 // Photoswip zoom ---------------------------------
 .tainacan-photoswipe-layer {
-    .pswp__bg {
+    --pswp-bg: var(--tainacan-lightbox-background, #000);
-        background-color: rgba(0, 0, 0, 0.85);
+    --pswp-error-text-color: var(--tainacan-lightbox-text-color, #f7f7f7);
+    --pswp-icon-color: var(--tainacan-lightbox-text-color, #fff);
+
+    .pswp__caption {
+        bottom: 0;
+        position: fixed;
+        padding: 8px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
     }
-    .pswp__ui--fit .pswp__top-bar,
+    .pswp__caption-inner {
-    .pswp__ui--fit .pswp__caption {
+        opacity: 0.75;
-        background-color: rgba(0, 0, 0, 0.7);
+        background-color: var(--pswp-bg);
+        color: var(--pswp-icon-color);
+        text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
+        max-width: 920px;
+        padding: 12px;
+        line-height: 20px;
+        text-align: center;
+        font-size: 1em;
+        border-radius: 3px;
+        transition: opacity 0.4s ease;
+
+        &:hover {
+            opacity: 1.0;
+        }
+    }
+    &.pswp--zoomed-in .pswp__caption-inner {
+        opacity: 0.0;
     }
     .pswp__button--arrow--left::before,
     .pswp__button--arrow--right::before {
@@ -486,7 +499,7 @@ $pswp__include-minimal-style: true !default;
             z-index: 99;
             padding: 1rem 4.33337vw;
             background: var(--tainacan-media-background, #ffffff);
-            border-radius: var(--borderRadius, 3px);
+            border-radius: 3px;
             word-wrap: break-word;
         }
         audio {
@@ -502,7 +515,8 @@ $pswp__include-minimal-style: true !default;
         }
     }
     .pswp__top-bar .pswp__name {
-        color: white;
+        color: var(--pswp-icon-color);
+        text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
         text-align: center;
         font-size: 1.125em;
         display: block;

src/views/gutenberg-blocks/blocks/item-gallery/theme.js

@@ -2,13 +2,14 @@
 //
 // Counts on some HMTL markup to make a list of media links be displayed
 // as a carousel with a lightbox. Check examples in the end of the file 
-import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
+import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm';
-import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js';
+import PhotoSwipe from 'photoswipe/dist/photoswipe.esm';
 import 'photoswipe/dist/photoswipe.css';
-import Swiper, { Navigation, A11y } from 'swiper';
+import Swiper, { Navigation, A11y, Thumbs } from 'swiper';
 import 'swiper/swiper.min.css';
 import 'swiper/modules/navigation/navigation.min.css';
 import 'swiper/modules/a11y/a11y.min.css';
+import 'swiper/modules/controller/controller.min.css';
 
 const { __ } = wp.i18n;
 
@@ -31,14 +32,16 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
         this.main_gallery_selector = main_gallery_selector;
         this.thumbsSwiper = null;
         this.mainSwiper = null;
+        this.lightbox = null;
         this.options = options;
+
         this.initializeSwiper();
         
         if (!this.options.disable_lightbox) {
             if (this.main_gallery_selector)
-                this.initPhotoSwipeFromDOM(this.main_gallery_selector + " .swiper-wrapper");
+                this.initializePhotoswipe(this.main_gallery_selector + " .swiper-wrapper");
             else if (this.thumbs_gallery_selector)
-                this.initPhotoSwipeFromDOM(this.thumbs_gallery_selector + " .swiper-wrapper");
+                this.initializePhotoswipe(this.thumbs_gallery_selector + " .swiper-wrapper");
         }
     }
   
@@ -56,7 +59,10 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
                 pagination: {
                     el: '.swiper-pagination_' + this.thumbs_gallery_selector
                 },
+                // centeredSlides: true,
+                // centeredSlidesBounds: true,
                 centerInsufficientSlides: true,
+                slideToClickedSlide: true,
                 watchOverflow: true,
                 a11y: {
                     prevSlideMessage: __( 'Previous slide', 'tainacan'),
@@ -71,17 +77,9 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
         }
 
         if (this.main_gallery_selector) {
-            
             let mainSwiperOptions = {
                 slidesPerView: 1,
                 slidesPerGroup: 1,
-                // navigation: {
-                //     nextEl: '.swiper-navigation-next_' + this.main_gallery_selector,
-                //     prevEl: '.swiper-navigation-prev_' + this.main_gallery_selector,
-                // },
-                // pagination: {
-                //     el: '.swiper-pagination_' + this.main_gallery_selector
-                // },
                 watchOverflow: true,
                 a11y: {
                     prevSlideMessage: __( 'Previous slide', 'tainacan'),
@@ -91,40 +89,168 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
                 },
                 modules: [Navigation, A11y]
             };
-            if (this.thumbsSwiper) {
+            mainSwiperOptions = {...mainSwiperOptions, ...this.options.swiper_main_options };
+        
+            if (this.thumbs_gallery_selector && this.thumbsSwiper) {
                 mainSwiperOptions.thumbs = {
                     swiper: this.thumbsSwiper,
                     autoScrollOffset: 3
                 }
+                mainSwiperOptions.modules = [Navigation, A11y, Thumbs];
             }
-            mainSwiperOptions = {...mainSwiperOptions, ...this.options.swiper_main_options };
+
             this.mainSwiper = new Swiper(this.main_gallery_selector, mainSwiperOptions);
+        }
         
     }
   
-        if (this.thumbsMain && this.mainSwiper) {
+    /* Initializes Photoswipe Lightbox */
-            this.mainSwiper.controller = {
+    initializePhotoswipe (gallerySelector) {
-                control: this.thumbsSwiper,
-                by: 'slide'
-            }
-        }
-    }
 
-    initPhotoSwipeFromDOM (gallerySelector) {
+        // Loop through all gallery elements and bind events
-        // loop through all gallery elements and bind events
         let galleryElement = document.querySelector(gallerySelector);
-        
         galleryElement.setAttribute("data-pswp-uid", this.options.media_id);
-        galleryElement.onclick = (event) => this.onThumbnailsClick(event, this);
+        console.log(this.options.media_id);
 
-        // Parse URL and open gallery if it contains #&pid=3&gid=1
+        let items = this.parseThumbnailElements(galleryElement);
-        let hashData = this.photoswipeParseHash();
+        let photoswipeOptions = {
+            loop: false,
+            preloadFirstSlide: false,
+            mainClass: 'tainacan-photoswipe-layer', 
+            bgOpacity: 0.85,
+            clickToCloseNonZoomable: false,
+            closeTitle: __( 'Close lightbox', 'tainacan'),
+            zoomTitle: __( 'Zoom', 'tainacan'),
+            arrowPrevTitle: __( 'Previous slide', 'tainacan'),
+            arrowNextTitle: __( 'Next slide', 'tainacan'),
+            getClickedIndexFn: (clickedElement) => {
+                return items.findIndex(anItem => anItem.el.contains(clickedElement.target));
+            },
+            padding: { top: 60, bottom: 60, left: 40, right: 40 },
+            // paddingFn: (viewportSize, itemData, index) => {
+            //     console.log(viewportSize, itemData, index)
+            //     return {
+            //         // check based on slide index
+            //         top: 60,
+            //         bottom: 0,
+            //         left: 0,
+            //         right: 0
+            //     };
+            // }
+        };
 
-        if (hashData.pid && hashData.gid)
+        // Pass data to PhotoSwipe and initialize it
-            this.openPhotoSwipe(hashData.pid, galleryElement, true, true);
+        this.lightbox = new PhotoSwipeLightbox({
+            gallery: galleryElement,
+            children: items,
+            pswpModule: PhotoSwipe,
+            ...photoswipeOptions
+        });
+        this.lightbox.init();
+        
+        /* Updates Swiper instance from Photoswipe */
+        const swiperInstance = this.mainSwiper ? this.mainSwiper : this.thumbsSwiper;    
+        const thisLightbox = this.lightbox;
+
+        // Parse URL and open gallery from it if contains #&pid=3&gid=1
+        const hashData = this.photoswipeParseHash();
+        if (hashData.pid && hashData.gid && this.options.media_id == hashData.gid) {
+            // in URL indexes start from 1
+            photoswipeOptions.index = parseInt(hashData.pid, 10) - 1;
+
+            if (!isNaN(photoswipeOptions.index) && items[photoswipeOptions.index] && items[photoswipeOptions.index].el)
+                items[photoswipeOptions.index].el.click();
         }
 
-    // parse slide data (url, title, size ...) from DOM elements
+        // On destroy we make a copy of the inner content to clear it
+        // and set again. This stops YouTube player, for example. 
+        this.lightbox.on('destroy', () => { 
+            let actualGalleryContainer = document.getElementsByClassName("pswp__container")[0];
+            if (actualGalleryContainer) {
+                let currentData = actualGalleryContainer.innerHTML;
+                actualGalleryContainer.innerHTML = '';
+                actualGalleryContainer.innerHTML = currentData;           
+            } 
+        });
+
+        // Swiper autoplay stop when image zoom */
+        this.lightbox.on('initialZoomInEnd', () => {
+            if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled && swiperInstance.autoplay.running)
+                swiperInstance.autoplay.stop();
+        });
+
+        // Update position of the slider
+        this.lightbox.on("change", () => {
+
+            if (thisLightbox.pswp && thisLightbox.pswp.currIndex) {
+                // This is the index of current photoswipe slide
+                swiperInstance.slideTo(thisLightbox.pswp.currIndex);
+
+                // Also updates URL for history navigation
+                // We only add to the history if it is the first time opening
+                let currentURL = window.location.toString();
+                if (currentURL.indexOf("#") > 0) {
+                    currentURL = currentURL.substring(0, currentURL.indexOf("#"));
+                    window.history.replaceState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (thisLightbox.pswp.currIndex + 1));
+                } else {
+                    window.history.pushState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (thisLightbox.pswp.currIndex + 1));  
+                } 
+            }
+        });
+
+        // Re-starts autoplay, if needed
+        this.lightbox.on("close", () => {
+            // Start swiper autoplay (on close - if swiper autoplay is true)
+            if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled)
+                swiperInstance.autoplay.start();
+
+            // Clears URL hash as we no longer need history navigation
+            let currentURL = window.location.toString();
+            if (currentURL.indexOf("#") > 0)
+                window.history.replaceState({},'', currentURL.substring(0, currentURL.indexOf("#")));
+        });
+
+        // Adds caption
+        this.lightbox.on('uiRegister', () => {
+            thisLightbox.pswp.ui.registerElement({
+                name: 'caption',
+                order: 15,
+                isButton: false,
+                appendTo: 'root',
+                onInit: (el, pswp) => {
+                    thisLightbox.pswp.on('change', () => {
+                        const item = pswp.currSlide.data;
+                        if (item && item.title) {
+                            let innerHTML = '';
+                                
+                            innerHTML += '<div class="pswp__caption-inner">';
+                            
+                            if (item.title.caption)
+                                innerHTML += '<span class="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
+
+                            if (item.title.name && item.title.caption || (!item.title.name && item.title.caption && item.title.description) )
+                                innerHTML += '<br>';
+
+                            if (item.title.name)
+                                innerHTML += '<span class="pswp__name">' + item.title.name.innerHTML + '</span>';
+                                
+                            if (item.title.description && item.title.name)
+                                innerHTML += '<br>';
+
+                            if (item.title.description)
+                                innerHTML += '<span class="pswp__description">' + item.title.description.innerHTML + '</span>';
+                            
+                            innerHTML += '</div>';
+
+                            el.innerHTML = innerHTML;
+                        }
+                    });
+                }
+            });
+        });
+    }
+  
+    // Parse slide data (url, title, size ...) from DOM elements
     // (children of gallerySelector)
     parseThumbnailElements(el) {
         let items = [];
@@ -182,189 +308,8 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
         return items;
     };
 
-    openPhotoSwipe(
-      index,
-      galleryElement,
-      disableAnimation,
-      fromURL
-    ) {
-        let pswpElement = document.querySelectorAll(".pswp")[0],
-            gallery,
-            options,
-            items;
-        items = this.parseThumbnailElements(galleryElement);
   
-        // Photoswipe options
+    // Parse slide index and gallery index from URL (#&pid=1&gid=2)
-        // https://photoswipe.com/documentation/options.html //
-        options = {
-            showHideOpacity: true,
-            loop: false,
-            timeToIdle: 6000,
-            timeToIdleOutside: 3000,
-            closeEl: true,
-            captionEl: true,
-            fullscreenEl: true,
-            zoomEl: true,
-            counterEl: true,
-            arrowEl: true,
-            preloadFirstSlide: false,
-            preload: [0,0],
-            shareEl: this.options.show_share_button ? this.options.show_share_button : false,
-            bgOpacity: 1,
-            // define gallery index (for URL)
-            galleryUID: galleryElement.getAttribute("data-pswp-uid"),
-            getThumbBoundsFn: (index) => {
-                let thumbnail = items[index].el,
-                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
-                    rect = thumbnail.getBoundingClientRect();
-        
-                return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
-            },
-            // Function builds caption markup
-            addCaptionHTMLFn: (item, captionEl, isFake) => {
-                // item      - slide object
-                // captionEl - caption DOM element
-                // isFake    - true when content is added to fake caption container
-                //             (used to get size of next or previous caption)
-
-                captionEl.children[0].innerHTML = '';
-                
-                if(!item.title)
-                    return false;
-                    
-                if (item.title.caption)
-                    captionEl.children[0].innerHTML += '<span class="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
-
-                if (item.title.name && item.title.caption || (!item.title.name && item.title.caption && item.title.description) )
-                    captionEl.children[0].innerHTML += '<br>';
-
-                if (item.title.name)
-                    captionEl.children[0].innerHTML += '<span class="pswp__name">' + item.title.name.innerHTML + '</span>';
-                 
-                if (item.title.description && item.title.name)
-                    captionEl.children[0].innerHTML += '<br>';
-
-                if (item.title.description)
-                    captionEl.children[0].innerHTML += '<span class="pswp__description">' + item.title.description.innerHTML + '</span>';
-                    
-                return true;
-            },
-
-        };
-
-        // PhotoSwipe opened from URL
-        if (fromURL) {
-            if (options.galleryPIDs) {
-                // parse real index when custom PIDs are used
-                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
-                for (let j = 0; j < items.length; j++) {
-                    if (items[j].pid == index) {
-                        options.index = j;
-                        break;
-                    }
-                }
-            } else {
-                // in URL indexes start from 1
-                options.index = parseInt(index, 10) - 1;
-            }
-        } else {
-            options.index = parseInt(index, 10);
-        }
-
-        // exit if index not found
-        if (isNaN(options.index))
-            return;
-    
-        if (disableAnimation)
-            options.showAnimationDuration = 0;
-    
-        // Pass data to PhotoSwipe and initialize it
-        gallery = new PhotoSwipeLightbox({
-            gallery: pswpElement,
-            pswpModule: PhotoSwipe,
-            children: items,
-            ...options
-        });
-        gallery.loadAndOpen(options.index);
-
-        /* Updates PhotoSwiper instance from Swiper */
-        let swiperInstance = this.mainSwiper ? this.mainSwiper : this.thumbsSwiper;
-    
-        gallery.on("unbindEvents", () => {
-            // This is index of current photoswipe slide
-            let getCurrentIndex = gallery.getCurrentIndex();
-            // Update position of the slider
-            swiperInstance.slideTo(getCurrentIndex, 0, false);
-            // Start swiper autoplay (on close - if swiper autoplay is true)
-            if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled)
-                swiperInstance.autoplay.start();
-        });
-    
-        // Swiper autoplay stop when image zoom */
-        gallery.on('initialZoomIn', () => {
-            if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled && swiperInstance.autoplay.running)
-                swiperInstance.autoplay.stop();
-        });
-
-        // On destroy we make a copy of the inner content to clear it
-        // and set again. This stops YouTube player, for example. 
-        gallery.on('destroy', () => { 
-            let actualGalleryContainer = document.getElementsByClassName("pswp__container")[0];
-            if (actualGalleryContainer) {
-                let currentData = actualGalleryContainer.innerHTML;
-                actualGalleryContainer.innerHTML = '';
-                actualGalleryContainer.innerHTML = currentData;           
-            } 
-        });
-
-    };
-  
-    // triggers when user clicks on thumbnail
-    onThumbnailsClick(e, self) {
-        e = e || window.event;
-        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
-
-        let eTarget = e.target || e.srcElement;
-        
-        // find root element of slide
-        let closest = function closest(el, fn) {
-            return el && (fn(el) ? el : closest(el.parentNode, fn));
-        };
-        
-        let clickedListItem = closest(eTarget, function(el) {
-            return el.tagName && el.tagName.toUpperCase() === "LI";
-        });
-        
-        if (!clickedListItem)
-            return;
-    
-        // find index of clicked item by looping through all child nodes
-        // alternatively, you may define index via data- attribute
-        let clickedGallery = clickedListItem.parentNode,
-            childNodes = clickedListItem.parentNode.childNodes,
-            numChildNodes = childNodes.length,
-            nodeIndex = 0,
-            index;
-            
-        for (let i = 0; i < numChildNodes; i++) {
-            if (childNodes[i].nodeType !== 1)
-                continue;
-    
-            if (childNodes[i] === clickedListItem) {
-                index = nodeIndex;
-                break;
-            }
-            nodeIndex++;
-        }
-    
-        // open PhotoSwipe if valid index found
-        if (index >= 0)
-            self.openPhotoSwipe(index, clickedGallery);
-
-        return false;
-    }
-  
-    // parse picture index and gallery index from URL (#&pid=1&gid=2)
     photoswipeParseHash() {
         const hash = window.location.hash.substring(1),
             params = {};
@@ -384,8 +329,8 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
             params[pair[0]] = pair[1];
         }
     
-        if (params.gid)
+        if (params.pid)
-            params.gid = parseInt(params.gid, 10);
+            params.pid = parseInt(params.pid, 10);
     
         return params;
     }