Allow pinch-to-zoom for Lightbox images on mobile?

YESSS! Ngan Le's plugin í fantastic!!! And the direct support by him is truly amazing! I had purchased the plugin previously via Etsy, and after a while I realised there was a an issue where if you went from a page to an other the previous gallery would show (not the new one)... Via email he helped me to updated the plugin/code to the latest version via the new website https://beyondspace-showcase.squarespace.com/pinch-zoom-lightbox, and everything now works flawless on iPhone (mobile) & on Desktop!!

Fantastic that there are these kind of developers that fix what Squarespace forgot to implement (quite crazy something like this isn't obvious in Squarespace)...

Thank you Ngan!!!

I did purchase the plugin from BeyondSpace, https://beyondspace-showcase.squarespace.com/pinch-zoom-lightbox and I´m glad that I did. At first, it seems a little pricey, but you wont regret it (I had to update to Squarespaces Business plan). Not only did the plugin fix pinch-to-zoom, but Niang Lee also did a lot of work to fix two other issues that I had. The first wish I had for my gallery images, was that I wanted the captions under the tumbnail-images hidden, but showing up under the lightbox images. And the second was that I did not wanted arrows upon the lightbox images on mobile. Have to say that this was excellent customer service, and I´m very satisfied with how Niang Lee fixed the issues. After the plugin was installed, I changed the galleries from portfolio to gallery pages, no problem occured. If you look at my site, under "Galleri"---"Panorama", you will see examples on how captions work. The site is still new, but you can go to www.janrolsen.no to see how it works.

Hello,

I have the very basic need for pinch to zoom in lightbox mode, to see images in higher resolution. Here is the code that I have tried, based on other code that seems to have this structure: 

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script>
  // Custom JavaScript code to enable pinch-to-zoom for Squarespace lightbox gallery
  document.addEventListener('DOMContentLoaded', function () {
    const lightboxImages = document.querySelectorAll('.gallery-masonry-lightbox-link img');

    lightboxImages.forEach((image) => {
      const hammertime = new Hammer(image);
      hammertime.get('pinch').set({ enable: true });
    });
  });
</script>

.gallery-lightbox-list 
.gallery-lightbox-item img
.yui3-lightbox2
.sqs-mobile-web-content-editing

Hi @tuanphan I may as well tag the guy with the best answers on here!

Do you have any idea how to make lightbox images zoomable on mobile? Seems like there is lot of demand and confusion about this!

Best wishes

On 8/23/2023 at 2:25 AM, ValueResonance said:

Hi @tuanphan I may as well tag the guy with the best answers on here!

Do you have any idea how to make lightbox images zoomable on mobile? Seems like there is lot of demand and confusion about this!

Best wishes

Our plugin Lightbox studio can help you achieve this, kindly provide the site URL so I can provide dedicated playground URL so you can test the plugin in action