[Resolved] Create lightbox effect – image on the left and text on the right

[Leonardo]

Hello guys. How are you?

I’m trying to create a huge difficulty in a relatively simple effectbox:

I have an image and by clicking on it, in addition to the image, it would also open its description/caption.

However, I would like the image to open on the left side and the description/caption next to it, like in this image: http://escolasuzuki.leonardomarioto.com/wp-content/uploads/2022/08/example-lightbox.png

Do you have something already included in WordPress or the theme that does this with a few CSS tweaks?

Thanks.

[David]

Hi there,

do you have a Lightbox that is showing the Image and Description ? If so can i see it on the site ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leonardo]

David, I tested some plugins, but I would like to see if there is also some native form of WordPress/Generate.

[David]

No, neither WP or GP has anything like that built in. You will need a plugin for that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leonardo]

David, I think I found a good and simple solution!

Now, I really just need a little help with CSS, that is, leaving the photo on the left and the text on the right.

You can access the page http://escolasuzuki.leonardomarioto.com/professores/ and take the third “Dario Oliveira” as an example.

Click on it and see how it looks, please.

[Ying]

Which photo are we talking about? Is it this one built with GB?
https://www.screencast.com/t/CGy9MybeKe

How would you like it to be? Can you provide a mockup?

[Leonardo]

Ying, clicking on this photo will open a lightbox with the image and the text below it.

What I want is to have the image on the left and the text on the right (instead of it being below the image).

Understand?

[Ying]

Try this:

@media (min-width: 769px) {
#slb_viewer_wrap .slb_theme_slb_default .slb_container {
    display: block;
    max-width: 70%;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_details {
    padding-left: 20px;
    margin: 0 !important;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_content {
    float: left;
}
}

[Leonardo]

Hi!

I would like a last bit of help with a CSS in an image lightbox, if possible.

The page is http://escolasuzuki.leonardomarioto.com/professores/

As you can see in this image “http://escolasuzuki.leonardomarioto.com/wp-content/uploads/2022/08/ajuda-css-lightbox.png” the white background that accompanies the text does not follow until the end of the image. I would like the white background to follow until the end of the image too.

If you can help me, I would be very grateful!

[Ying]

Can you point me to this specific image? I searched the image URL in page source, but couldn’t find it.

[Leonardo]

Sorry, the link was wrong:

http://escolasuzuki.leonardomarioto.com/wp-content/uploads/2022/08/ajuda-css-lightbox.png

If I can, I would also like to reduce the size that the image appears in the lightbox, but I’m also having difficulties…

[Ying]

Could you change my previous CSS to this?

@media (min-width: 1025px) {
    #slb_viewer_wrap .slb_theme_slb_default .slb_container {
        max-width: 70%;
    }
    #slb_viewer_wrap .slb_theme_slb_default .slb_details {
        padding-left: 20px;
        margin: 0 !important;
    }
    .slb_container {
        display: flex !important;
        flex-wrap: nowrap;
    }
    .slb_details {
        flex: 1;
    }
}

[Author]

Posts