Set width?

[stephenmeehanuk]

Hi

Apologies for the daft question, I've looked at the docs, and I can't seem to get this work....

I'm using this, but I can't figure out how to override the width of the light-box

const lightbox = GLightbox({
    selector: ".glightbox",
    autoplayVideos: true,    
});

I thought adding width would work, but it doesn't override it?

const lightbox = GLightbox({
    selector: ".glightbox",
    autoplayVideos: true, 
    width: "90%",
});

[janstieler]

Hi,
normally you should override it by CSS.
Or you can also select the lightbox elements with js and set a width.

[gingerchew]

Not a daft question at all :)

The width setting has a bit of a catch to it. In the documentation it says it is for setting the width of Inline and iFrame Slides, rather than the default Image Slides (or any other for that fact). You can set a data-width or data-height on an Image Slide trigger, and that will apply it when the lightbox is opened, see here

Which might look something like this:

<a href="src/to/my/large-img.jpeg" data-width="600px" data-height="400px" class="glightbox">
  <img src="src/to/my/thumbnail-img.jpeg" alt="a unique description of the image for screen readers" />
</a>