Full screen image previews

Custom Coding
1

When clicking image gallery images / images, the lightbox preview barely covers half the screen in my experience.
Is there any way the preview can be made larger with some custom code? ideally full screen?
It would be vastly appreciated if anyone has any solutions.

Thanks in advance!

2

Hey @SdogEinnarg,

I will check this and will keep you posted.

3

Can you share a gallery link to check this issue, and then I share my experience?

4

Hey @SdogEinnarg,

Please share a URL where I can see the issue, could not reproduce this on my end.

5

Hi both of you, apologies for not getting back immediately, I’ve been really tied up.

I’ve made a sample page to simulate the same thing. Once you click on the one item in the list, you will be taken to the detail. Clicking on the main image only previews to half the screen. If I could make full screen previews work, I would apply it to other areas of my site, not just in this situation.

link below:
https://www.haleystudios.com/portfolio-sample

2022-12-19 10_10_23-Portfolio
2022-12-19 10_10_23-Portfolio1920×1074 197 KB

6

Can you check this project, click on a list item and click image gallery?

Maybe this approach works better for you.

7

Ah, that’s more towards what I’m looking for. It would be nice if it shaded the rest of the screen in the process (like my attachment). How is your example achieving that full screen preview?

8

Hey sure,

It is making use of the library PinchZoom from “https://unpkg.com/pinch-zoom-js@2.3.5/dist/pinch-zoom.min.js”

1 Like
9

Thanks for that! I’m a fully fledged no-coder with only bits and pieces of knowledge that have gotten me so far, so this is a bit over my head. I’m guessing I would need to have some code understanding to know how to implement this? I guess I was anticipating there might be a snippet of code I can paste into the custom code area on Softr, or something like that!

Irrespective whether I can utilise your suggestion, perhaps it will be useful to someone else!

10

Hi @SdogEinnarg

I know it’s a bit late, but I was (also) looking for a solution and ended up adding this code to my parent page:

.MuiModal-root .MuiBox-root > img {
  max-height: none !important;
  max-width: none !important;
  height: 90vh !important;
  width: auto !important;
  display: block;
}

The parent page: the one that opens the popup.
The code is added between the <style></style> tags in Code inside header.

1 Like
11

Hi Yannick,

Thanks for sharing this!

Will this work with modals? As I’m having no luck so far…

I’ve literally just pasted the following into my record detail page’s ‘Code inside header’:

<style>
.MuiModal-root .MuiBox-root > img {
  height: 100vh !important;
  width: auto !important;
  display: block;
}
</style>

Am I missing anything?

13

I’ve corrected the original code, can you try again?

14

Ah-ha! Yes this works now!

Though, there is one caveat. For me, it doesn’t work so well on Mobile, at least in portrait orientation (in landscape, it’s fine). In portrait, the image goes to the height of the page, but goes off screen on horizontally.

Is there a potential workaround for this?

15

Goood ! Try this :

.MuiModal-root .MuiBox-root > img {
  max-width: 90vw !important;
  max-height: 90vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}
1 Like
16

This is certainly better, to the point I would now apply this to my site as so far it seems like an overall improvement.

The only drawback to the last iteration is that, on desktop, it no longer goes as large as the initial version did. But, it is larger than without the code, so as said above, it’s better than the default.

I tried upping the numbers to 100, however it made no difference on desktop (it did on mobile).

Really appreciate you iterating on this, even if this is as far as you can take it!

17

With pleasure, sorry I couldn’t do better for now.

Maybe I’ll find a solution in development and keep you posted :wink:
In the meantime, can I suggest that you check off the answer as a solution found? I’ll update this block later.

(I’d be interested in seeing a screenshot just in case)

1 Like
18

As I say, your input is already much better than without, so I’m really happy already :blush:

I’m struggling to find how to mark this topic as solved :thinking: Perhaps the type of post doesn’t give the option. I certainly will do however if I figure it out. I’ll also try share some screenshots when I get chance :+1:

Thanks again!