Issues with Envira Gallery Including Images Not Showing at Original Size in Lightbox

[core365]

Hi, I’m using Envira Gallery and I’ve created 2 galleries on a website but I’m having a few issues with it.

1. The title below the thumbnails - I can’t find the correct CSS to change the font for it!

2. Even though I’ve configured the Lightbox to show the images at the original size, it still resizes them all to a much smaller than they are.

3. When viewing the lightbox, is it possible to move the title to display in the center of the page instead of the left?

4. When viewing the lightbox, is it possible to move the thumbnails to display in the center of the page instead of the left?

I’ll put the URL in a secure note as I’m still working on the site.

Thanks!

[rad]

Hi @core365,

Thanks for writing in.

1. Are you referring to the title above the lightbox? I don’t see any text below the thumbmails. If yes, then this should be the CSS and just apply your own styling.

.envirabox-theme-base_dark .envirabox-caption {
font-family: "Arial";
} 

2. I assume you’re not referring to the thumbnails, the images are displayed on its original size. Links are in the secure note. Resized images usually have their URLs added with dimension information, example

JLS-Design-and-Build-Bathroom.jpg (original)
JLS-Design-and-Build-Bathroom-300x300.jpg (resized)

3. If it’s the same in #1 (top title) then just add this styling to #1 CSS.

text-align: center;

Example,

.envirabox-theme-base_dark .envirabox-caption {
font-family: "Arial";
  text-align: center;
} 

4. Please add this CSS as well,

.envirabox-thumbs > ul > li {
    float: none;
    display: inline-block;
}
.envirabox-thumbs > ul {
    text-align: center;
}

Hope these helps.

[core365]

Hi, thanks for getting back to me!

1. Sorry, I meant the thumbnails on the single project page (where all images are shown in the gallery), not the lightbox! But I’ve just noticed that the div tags are different when I use the ‘Inspect’ function in Chrome on the Cornerstone page as opposed to when I view the page from the ‘Customizer, Edit Global CSS’! It shows the correct div tags in the Customizer, so I’ve managed to change the CSS correctly for this myself.

2. Yep, it’s the main image in the lightbox I’m referring to. The JLS-Design-and-Build-Bathroom.jpg is 1536 × 2048px yet it’s displaying much smaller in the lightbox.

Thanks!

[rad]

Hi @core365

1. Ah, glad it’s okay now.

2. I see, you mean it should display bigger as it is now? It displays the original image, but it only responds to the dimension of its container. I tried changing the container size thru CSS but it’s glitchy due to its responsive positioning and a transform styling. Would you mind providing your admin login credentials in a secure note? Maybe it’s settings related since the dimension is calculated through javascript.

Thanks!

[core365]

Hi, that would be great if you don’t mind taking a look! I’ll put the admin info in a secure note.

Thanks!

[Alaa]

Hi core365,

You can enable “Lightbox Supersize” to get a bigger image size in lightbox, please check this screenshot:

Thanks.

[core365]

Hi, thanks for that! However I don’t understand why you need to select the supersize image option if you’ve already set it to display them at their original size!

Cheers

[rad]

Hi there,

As I was saying, it’s already displayed in its original size. But, it still need to follow the container size as its responsive nature. The rendering size is calculated based on the device where it’s viewed (device height + spaces). Hence, it will appear smaller even if it’s in its original size. The size still depends on device size.

The option supersize is of course ignoring the space and make the image almost fit to device’s height and width.

Try resizing your browser width and height while testing both Enable Lightbox Supersize on and off and you’ll see. If it’s off, it will keep spaces, but if it’s on, there will be no spaces. But it doesn’t mean it’s not displayed in its original size.

The only way to display it as exactly as you expected is to overridden its responsive nature and turn it off through CSS. But that means a 800px image will stay 800px in a 320px device screen.

Thanks!