Webstudio incorrectly rendering lightgallery.js library

At a glance

A community member was using the lightgallery.js library to add a lightbox/gallery to their site, but the CSS was not working correctly, with the top toolbar and prev & next buttons rendered out of place or incorrectly. They tried troubleshooting but couldn't find a solution. However, when they copied the HTML/CSS from a Webstudio page and pasted it into a Replit, the lightgallery.js implementation worked fine. The community members discussed the issue, and one of them suggested that the root cause was the white-space-collapse: preserve setting, which was different from the browser default of collapse.

Useful resources

aashishdhngr

I've been using the lightgallery.js library to add a lightbox/gallery to my site. Using the HTML block, I embedded the lightgallery.js style sheet and script. The js and gallery initiates and works, however, the css is a bit wonky. Top toolbar and prev & next buttons are rendered out of place or incorrectly.

After troubleshooting with no luck, I copied the html/css of the webstudio page and paste it into a replit, added the lightgallery script and style sheet, and it worked there!

Webstudio builder view link -
https://p-c4b0aacc-ba6e-4cbb-998d-5dde2361f039.apps.webstudio.is/?authToken=71b4fac9-f738-4203-9f92-b37620395464&mode=preview

Replit code -
https://replit.com/@ashish102/GlumTerribleStructure

OOleg Isonen

Marked as solution

the reason was white-space-collapse: preserve we define on the root

View full solution

21 comments

OOleg Isonen

I can see it working on your project on small previews which are not wrapped in a link

OOleg Isonen

so you managed to turn a div into a link (Anchor) using a binding for the tag property

OOleg Isonen

and your library is not designed to work with links or you are using something wrong there, setting there a div back to div makes everything functional

OOleg Isonen

also tip:

add defer attribute to your script

<script defer src="
https://cdn.jsdelivr.net/npm/[email protected]/lightgallery.min.js
"></script>

This will avoid blocking rendering while downloading the script

aashishdhngr

I've added a loom to clarify the issue. The gallery + lightbox views are working. But within the lightbox view, the "toolbar" header and icons with webstudio have odd css issues. -

Webstudio Loom
https://www.loom.com/share/ee964eaecfaa49339d98fbe8c6b61065?sid=ac7fa0a1-1901-4a9e-92fa-694fad77ea2a

Replit Loom -
https://www.loom.com/share/3fd40cf165db4f4caec75b300d907ccd?sid=0d2dd32a-a38d-4b19-8584-07f489182995

Here is the replit live page (the page renders funny, but click on one of the empty images and the lightbox opens fine)
https://aaa1f12b-ea33-4c86-be98-3fb8a182e75a-00-2un9z11ob8ck7.spock.replit.dev/

aashishdhngr

Ended up using https://github.com/nextapps-de/spotlight over https://github.com/sachinchoolur/lightgallery.js Minimal changes to classes required and everything works well.

OOleg Isonen

if you still have lightgallary example, try removing display grid from the html element, just as an experiment

aashishdhngr

The HTML element uses the following display option. I've duplicated the project with the lightgallery.js implementation with build permissions if you want to navigate the canvas itself -https://p-ffa01bca-c354-40ed-9eac-f93278d718f8.apps.webstudio.is/?authToken=344308da-8800-4eaf-adec-c372e80f7653&mode=design

OOleg Isonen

the reason was white-space-collapse: preserve we define on the root

OOleg Isonen

where browser default seems to be collapse

OOleg Isonen

you can set it here if you still need it, in the meantime I will find out why we decided to set the default to preserve

OOleg Isonen

technically the library is also relying on these global things is not very robustly made, but that's another story

aashishdhngr

Thanks for helping troubleshoot this issue! Would have never guessed that was the root of the problem.

OOleg Isonen

me neither, I just went looking into devtools what is the styles that we define and turned off one after another

HHolger

I'm interested in Spotlight too, as it has nice features – but wonder how you solved linking to larger image versions from the thumbnail (so that Cloudflare serves separate images). Could you share a minimal sample of your setup?

aashishdhngr

I use directus as a cms which dynamically populates the gallery with links to images hosted on a seperate CDN. My thumbnails on the page are dynamically optimized through webstudio's cloudflare image service, however the larger image served by spotlight displays the cdn link provided by directus.

I'm using the following setup from spotlights documentation to achieve this -

Non-Anchor Elements
Alternatively you can use non-anchor elements also:

<div class="spotlight" data-src="cdn image link">

<img> webstudioized image (from cdn image link) </img>
</a>

You should also be able to use this with the optimized image provided by webstudio by appending queries to the end of the image url? (?width=2048&quality=80&format=auto)

aashishdhngr

Considering Oleg was able to troubleshoot the issue with lightgalleryjs, I would recommend moving over to it considering it's setup pretty much the same way and it's actively maintained.

HHolger

Thank you very much for this elaborate answer! I don't plan using a CMS – but the first part of your answer may help others nonetheless.

You should also be able to use this with the optimized image provided by webstudio by appending queries to the end of the image url? (?width=2048&quality=80&format=auto)

I'm afraid, I have to further expose my noob status here …
I understand how these URL-parameters work – but how do I get them? Grab from Devtools for each image (I have quite a few...)? And will the Cloudflare- URL change when I publish my finished project with its proper domain?

Put differently – would you see a straightforward way to assign the same [image large] treatment to any image with some class assigned, so that one can skip looking up URLs?

aashishdhngr

Got it - my recommendation is to run a script before the spotlight script is run which grabs all the parent elements with the .spotlight class, grabs the child image href, modifies the query parameters and appends it to the parent element as a data-src attribute...
The following script should do the job. I've also linked my dummy site if you want to look at the build itself.

Plain Text

<script>
  document.addEventListener('DOMContentLoaded', () => {
  const spotlights = document.querySelectorAll('.spotlight');

  spotlights.forEach((spotlight) => {
    // Find the child <img> (adjust if your actual structure differs).
    const img = spotlight.querySelector('img');

    // Safety check: make sure an <img> exists and has a src
    if (img && img.src) {
      // Parse the URL using the built-in URL API
      const url = new URL(img.src);

      // Modify the query parameters as needed
      // For example: set width = 3000, quality = 80, format = 'auto'
      url.searchParams.set('width', '3000');
      url.searchParams.set('quality', '80');
      url.searchParams.set('format', 'auto');

      // Finally, set the parent div's data-src to the updated URL
      spotlight.setAttribute('data-src', url.toString());
    }
  });
});


</script>

Dummy Site - Navigate to the page "Spotlight-test"

https://p-ffa01bca-c354-40ed-9eac-f93278d718f8.apps.webstudio.is/?authToken=344308da-8800-4eaf-adec-c372e80f7653&mode=design

aashishdhngr

@Holger While I do not believe the clouldflare imagee domain changes, this script makes that worry moot as it grabs the actual img src everytime.

HHolger

Awesome - thanks a lot for sharing! I'm currently away from the computer but will try this out later.

Add a reply

Join the Webstudio community

Webstudio incorrectly rendering lightgallery.js library