liwenyip / hugo-easy-gallery

Automagical css image gallery in Hugo using shortcodes, with optional lightbox/carousel gadget using PhotoSwipe and jQuery.
MIT License
573 stars 111 forks source link

Can I enable Open and Close effect like Photoswipe.com Demo page ? #48

Open NghiaMaster opened 5 years ago

NghiaMaster commented 5 years ago

https://codepen.io/dimsemenov/pen/ZYbPJM

ibrahim-sowunmi commented 2 years ago

I would also like to know this

Darthagnon commented 2 years ago

Relevant part of Photoswipe documentation: https://photoswipe.com/opening-or-closing-transition/

I've noticed, too, how the animation is wrong.

Darthagnon commented 2 years ago

I tried adding showHideAnimationType: 'zoom' to load-photoswipe.js without any success:

      // Save the index of this image then add it to the array
        items.push(item);
        // Event handler for click on a figure
        $figure.addEventListener('click', function(event) {
            event.preventDefault();  // prevent the normal behaviour i.e. load the <a> hyperlink
            // Get the PSWP element and initialize it with the desired options
            var $pswp = document.querySelector('.pswp');
            var options = {
                index: index,
                bgOpacity: 0.8,
                showHideOpacity: true,
                showHideAnimationType: 'zoom',
                focus: 'false',
                history: 'false'
            }
            new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
        }, false);
    });
}, false);