-
Posts
-
Hello,
For lightbox window size and background mask opacity. I used following css to increase window size to 1280px and bg opacity to 0.9 showing less original content.
.mfp-iframe-holder .mfp-content {
max-width: 1280px;
position:center;
top:30px;
}.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader {
opacity: 0.9 !important;
background: black !important;
}This works on links that has a custom url (either an image or video). However, when I choose “Lightbox linking active” in a masonry gallery element. it ignors my css settings, using the default layout which is less then 1280px and more bg content opacity. Although my targeted image size is >= 1280px. That is not I want. So how to change its default lightbox window size and the bg opacity.
You can see in the link I provided, when you click the video link on an image, it pops up a correct 1280px lightbox with 0.9 bg mask opacity. But when you click on a masonry gallery below, the popup window is less then 1280px.
And if possible, could you list the reference for all the essential lightbox CSS formats, including its icons (arrows), subtitle font size, position and how it shows differently on mobile.
Hey Yan,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.mfp-image-holder .mfp-content { max-width: 1280px!important; max-height: auto!important; } img.mfp-img { width: 100vw; min-height:100vh; }Best regards,
VinayHi Vinay,
I received your solution via email also, but the code is a bit different. The results for both code are not ideal for my solution.
For the code you provided above, the image fill the screen ignoring the original ratio.
For the code you sent via email which is as follows:.mfp-image-holder .mfp-content {
max-width: 100vw !important;
max-height: 100vh !important;
}
img.mfp-img {
width:1280px;
height:auto;
}For most horizontal image, it gets what I need, the image keeps its original ratio, but display as 1280px wide. However, for vertical image, it distort the height of the image into 100% of the screen size while forcing the width to be 1280px. Is there a way to fix the vertical image to keep their ratio while taking the height as priority.
Also to mention that if I give no extra code or simply change the img.mfp-img; max-width:1280px, the vertical image would display correctly, filling up the vertical space of the browser while keeping the width within original ratio. But in this way, all the horizontal image would display the default smaller size then 1280px.
Thanks.yan
Hi Vinay,
I has been a while since I submitted the issue. And I also provide you with login information. Please take a look to see if there is a way around the issue. Thanks.
Yan
Hi,
Sorry for the delay, I was checking for the issue and when I inspect the lightbox image the width is 1280px. did you get this sorted? The aspect ratio of the vertical images look fine too.
Let us know if you have any questions.
Best regards,
VinayHi Vinay,
I did manage to change the default lightbox pupup window size and the ratio, thanks to one of you colleague’s suggestion to use an imagesize plugin. Though I still could not change the automatic masonry thumbnail image ratio when I choose “Perfect Grid” with automatic thumbnail crop option.
yan
- The topic ‘Define custom light box window size and bg opacity’ is closed to new replies.