Jump to content

Full image size on lightbox

Recommended Posts

Hello everyone,

Can anyone please help me with the code to fix the size of my images.

I have set the aspect ratio to 1:1 to make the thumbnails square on preview but upon pop-out, I want to see the full size of my images (landscape, panorama) instead of square. 

My site: (deleted)

Thank you and stay safe,

Edited by Ptphotography
deleted site link
Link to comment

Add to Home > Design > Custom CSS

.gallery-lightbox-item img {
    object-fit: cover !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
  • 3 weeks later...
  • 4 months later...
  • 11 months later...

Hi there

@tuanphanThis is exactly I have been looking for a while and I stumbled upon this post. The code given here works beautifully for landscape images but it sort of distorts my portrait images. Is there a way to enlarge only landscape images in light box?

Your assistance will be greatly appreciated.

MoCha

Edited by MoCha
Link to comment
On 12/26/2021 at 8:06 AM, MoCha said:

Hi there

@tuanphanThis is exactly I have been looking for a while and I stumbled upon this post. The code given here works beautifully for landscape images but it sort of distorts my portrait images. Is there a way to enlarge only landscape images in light box?

Your assistance will be greatly appreciated.

MoCha

Can you share link to page where you have problem? We can check easier

(I guess no way to target landscape images only, but if you share url, we can take a look)

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 month later...

Dear @tuanphan 

 

I just used your code here to expand lightbox.  

But there is a problem. The larger light box shown is in landscape mode, and severely crops the original square image. Is there a way to simply make the light box larger, but adopt to the original image format? (or otherwize SQUARE lightbox, OR that image in lightbox automatically adjust content to fit lightbox, to fit lightbox frame? 

 

Site and page: https://gatsstudio.squarespace.com/art-shop/p/leaving-pompeii

Password: Lemon

Sincerely.. Peter

 

 

The code I used

.gallery-lightbox-item img {
    object-fit: cover !important;
}
Link to comment
On 2/11/2022 at 3:57 PM, peterbjerg said:

Dear @tuanphan 

 

I just used your code here to expand lightbox.  

But there is a problem. The larger light box shown is in landscape mode, and severely crops the original square image. Is there a way to simply make the light box larger, but adopt to the original image format? (or otherwize SQUARE lightbox, OR that image in lightbox automatically adjust content to fit lightbox, to fit lightbox frame? 

 

Site and page: https://gatsstudio.squarespace.com/art-shop/p/leaving-pompeii

Password: Lemon

Sincerely.. Peter

 

 

The code I used

.gallery-lightbox-item img {
    object-fit: cover !important;
}

Try use this CSS

.gallery-lightbox-item img {
    object-fit: contain !important;
}
.gallery-lightbox {
    padding: 0 !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

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.