Lightbox images in full resolution

Site URL: http://www.xaviervoirol.ch

Is there a way to change the display size of an image when it appears in the lightbox? When I click on a thumbnail, vertical images come with a size of 750 x 1125 px, but I would like them to be a bit bigger. At least a height of 2000 px or, even better, at full uploaded size (3000 x 4000 px). Actually, I need a hack to override the presence of the "?format=750w" taht appears at the end of the image URL.

Try adding to Design > Custom CSS

.sqs-lightbox-open .sqs-gallery-design-stacked-slide img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: -100% !Important;
}

Hello,

I am trying the following code in Code Injection:

<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>

However I do not know the precise handle to select the gallery-masonry-lightbox image in the querySelectorAll. 

i.e. I would like to call the lightbox image, and unsure about this line in the code: 

'.gallery-masonry-lightbox-link img'

I have also tried using the following inside the '', to no effect: 

.gallery-lightbox-list .gallery-lightbox-item

.yui3-lightbox2

.sqs-mobile-web-content-editing

My aim is to open the image in lightbox and utilize pinch-to-zoom. 

Any recommendations? 

Thanks!

Hi @tuanphan , any recommendation here? 

I added this to the things I have tried, and it also does not work: 

'.gallery-lightbox-item img'

Thanks for any and all help!