[Resolved] Image Gallery Lightbox uniform Size and Controls

[Author]

Posts

[michaelW-23]

Tell us what you are trying to do?
I want the images in the gallery lightbox to be a uniform size.

The images in the gallery are different sizes. They are uploaded by a number of users, so I cannot control the original image size. Hence, when clicking through the pop-up lightbox, each image is a completely different size, so the navigation arrows move all over the place. The user stops focusing on the image and ends up chasing the arrows around the screen. It is not pleasant.

How can I specify a size for the lightbox images... or at least position the prev / next arrows to stay in the same place on the screen, i.e. bottom-right.

What is the link to your site?
hidden link

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To make the lightbox container, cover the same width and height, you can include the following CSS code in the template CSS editor:

.lightbox .lb-outerContainer {
    width: 80% !important;
    height: 80vh !important;
    max-height: 80vh !important;
}

.lightbox .lb-outerContainer .lb-image {
    margin: 0px auto;
    max-width: 100%;
    max-height: 80vh;
}

This way, no matter how tall or wide those images are, the lightbox container will maintain the same size and the navigation arrows will show at the same position.

regards,
Waqar

[michaelW-23]

Perfect. My issue is resolved now. Thank you!