Image Gallery Lightbox uniform Size and Controls

This support ticket is created 2 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Sliders, Toolset Blocks, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by michaelW-23 2 years, 9 months ago.

Assisted by: Waqar.

Author

Posts

January 31, 2022 at 4:38 pm #2280005

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

February 1, 2022 at 7:11 am #2280411

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

February 1, 2022 at 10:32 am #2280559

michaelW-23

Perfect. My issue is resolved now. Thank you!