Jump to content

Issue with Lightbox Studio not centering product images

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.omegatrailers.co.nz/

Hi all,

I just recently installed Lightbox Studio plugin to my website to enable zooming in on my product photos which works great however, since installing the plugin all of my product photos are no longer centered to the correct aspect ratio before clicking on them. Most of my photos are 1:1 but i want to display them in 3:2 or 16:9 but they appear to be no longer centered and displaying incorrectly. So far the only fix I can think of is reuploading my photos to the aspect ratio.

My website is built on squarespace version 7.1 and added the css code for the lightbox plugin via code injection into the footer under website tools, any help would be appreciated thank you.

Screenshot 2024-09-17 131522.png

Edited by nickjm0210
corrected where install location of plugin code was
Link to comment
4 hours ago, nickjm0210 said:

Site URL: https://www.omegatrailers.co.nz/

Hi all,

I just recently installed Lightbox Studio plugin to my website to enable zooming in on my product photos which works great however, since installing the plugin all of my product photos are no longer centered to the correct aspect ratio before clicking on them. Most of my photos are 1:1 but i want to display them in 3:2 or 16:9 but they appear to be no longer centered and displaying incorrectly. So far the only fix I can think of is reuploading my photos to the aspect ratio.

My website is built on squarespace version 7.1 and added the css code for the lightbox plugin via code injection into the footer under website tools, any help would be appreciated thank you.

Screenshot 2024-09-17 131522.png

Hi, I got your enquiry via email and will help looking at the issue...

So the current product main image will be mis-align with Lightbox Studio installed

Lightboxstudioratioissue.thumb.png.ae8fd27dce7465f254427ec29c55f522.png

I think the root cause related to the wrapper element around the main product image (which is essential for for the product lightbox zoom functioning). Will dig deeper and let you know

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment
  • Solution

Okay, issue is resolved by making sure the img is center align using object-position,

image.thumb.png.39ff7811b5051212a2ea3535cea5e47f.png

I also tested against other products as well. Sent the solution via email also

Lightboxstudioratioissue(1).thumb.png.58152359c07b129255fa09462d131e21.png

Your Squarespace 7.1 product zoom lightbox is now live without issue

Quote

added the css code for the lightbox plugin via code injection into the footer under website tools

 The plugin is actually install on Footer injection with Javascript, not only CSS

 

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

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.