Jump to content

Lightbox images in full resolution

Recommended Posts

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.

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

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;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...


I am trying the following code in Code Injection:

<script src="https://hammerjs.github.io/dist/hammer.min.js"></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 });

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



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

Any recommendations? 


Edited by AKN
Add atetmpts
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.