Before/After Image on Lightbox

[solid7d]

Hi,
I would like to put some “Before / After” images in a lightbox gallery. I read some posts in the forum and I came to the conclusion that I have to insert the HTML code needed for the “Before / After” images on a page. Then create a gallery with “Essential Grid” and set it in “Lightbox” as the source “Post content” and finally put the “Essential Grid” on the desired page.
This is the post that most helped me: https://theme.co/apex/forum/t/creating-a-gallery-with-lightbox-with-html-content/23936

I succeeded and everything works as you can see here: https://solid3d.it/fotoinserimenti-temp/

I have only one small problem. When I open the gallery from a smartphone (I have tried with several smartphones) the result is what you see in the attachment.

Practically the image is not centered and there is a black part that reaches the end of the view.
I also tried to use a post instead of a page but in the lightbox but the problem remains.
The fact is that I managed to do a similar thing on this page: https://solid3d.it/360-2/ where the gallery opens 360 ° images but the “Before / After” images I can’t sitemarle correctly.
Can you help me to solve this problem?

In a secure note I attach your login credentials and you can change everything you need. The page containing the “Before / After” image is called “Appartamento privato”, the “Essential Grid” is called “Fotoinserimenti Temp” and the page where the “Essential Grid” is inserted is called “Fotoinserimenti Temp”. You can also remove the custom CSS (which I put in “Pro” -> “Theme Options”) since I made a backup.

Thank you and have a good day

[ruenel]

Hello @solid7d,

Thanks for writing in! The raw content element and the theme works with your layout. The issue may have came from the default styling of the Twenty20 image output. It is best that you contact the creators of the plugin since Twenty20 is a 3rd party plugin.

Thank you for your understanding.

[solid7d]

Hi @RueNel,
I have not listed all the attempts made, but among these there has also been a complete change of the content. Now, for example, I have replaced the “Before/After” image with a simple image and the problem is still there. Indeed now, in addition to the same display error of the mobile version, I see black areas appear on the sides and below also from the desktop view as you can see from the attachment:

Could you help me solve this problem with the simple image? So then I will replace the image with the “Before/After” version.

Thanks for your understanding and have a good day.

[christian]

Hey @solid7d,

Your setup of displaying a page within Essential Grid is complicated. That’s hard to fix. But to be specific, when you view your actual page, it does have gray areas from desktop to mobile view. The same areas display in the EG lightbox because the lightbox acts as a screen so it displays the page as you view it in an actual monitor or phone screen.

-----------------------------------------------------------------------------------

I’d recommend you simplify the setup by using a Content Area Modal element instead of Essential Grid. The lightbox dimensions of the Content Area Modal element are customizable and you can manage the content inside it easily. You can see what I mean by watching a similar setup in the following video.

Hope that helps.

[solid7d]

Hi @christian_y,
yes thanks, with your advice I solved and I transferred everything to the final page:
https://solid3d.it/fotoinserimenti/
One last thing, if possible.
I added buttons below each image in order to insert a caption: it would be possible that if you click the button under each “Content Area Modal” it opens the relative “Content Area Modal”?
I would need it for the last four images, since the first two have a link to an external site and are fine.

Thanks and have a good day

[solid7d]

the last request I solved with this post:

Trigger content area modal from Slider Revolution

Thanks for the help and have a good day

[christian]

You’re welcome, @solid7d. We’re glad that you’ve found the solution in another thread.