How to create a Lightbox with text and image (team bios page)

Hi there,

I am hoping to create a Lightbox in an our team page. I would like the Lightbox to open up with the picture as well as their name, job title and bio text. I've used the people section as a template and one of the options is to add a 'read bio' button. I'm just unclear where the bio goes and how it could be transformed into a Lightbox overlay. 

This website has the effect I'm trying to achieve:
https://browningenvironmental.com/people-3/

Any thoughts would be much appreciated! I'm not very savvy with code.

Ollie26, please let me know if you found a good solution on how to do this without a plugin. I found this answer, but not for the people gallary: 

15 hours ago, kspace said:

Ollie26, please let me know if you found a good solution on how to do this without a plugin. I found this answer, but not for the people gallary: 

 

 

We can achieve that with Custom JS/CSS code. But if create multiple lightboxes, it will more complex.

I don't have the code available here, but I have worked on a few cases for some members on forum (I don't remember the code, need to check it from scratch).

Assuming you only have one image, clicking on the image will bring up the lightbox

• We can create a section in Footer (will use CSS to hide it, so users can't see it)
• Then use some CSS to make this section fixed on middle of screen 
• Then use CSS to hide it
• Then use some JS code, to make it appears when users click Image/or Text
• Use JS code to make it close when clicking Close/X icon

If you need to create multiple lightboxes, you will need to create multiple sections in the Footer.
But if the Lightbox simply contains 1 Text Block, then we can just use 1 Section, and insert all the Text Blocks in this Section.

You can describe your case + site url, I can help easier