I figured it out with a little help from ChatGPT-4!
Here's how to do it.
Add the following as page header code injection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.clickable-element').click(function() {
var bioText = $(this).data('bio');
$('.bio-content p').text(bioText);
$('#lightbox-overlay').fadeIn();
});
$('#lightbox-overlay').click(function() {
$(this).fadeOut();
});
$('.bio-content').click(function(event) {
event.stopPropagation();
});
});
</script>
<style>
#lightbox-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999999;
}
#biography {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
z-index: 9999999;
opacity: 1;
}
.bio-content {
background-color: #F7F0E5;
padding: 20px;
border-radius: 5px;
max-width: 500px;
text-align: left;
color: #880808;
opacity: 1;
z-index: 9999999;
}
.clickable-element img{
border-radius: 40px;
width:100%;
}
.clickable-element:hover {
cursor: pointer;
}
</style>
<div id="lightbox-overlay">
<div id="biography">
<div class="bio-content">
<p></p>
</div>
</div>
</div>
Then on the page, create code blocks for each team member image. In that, put the following:
<div class="clickable-element" data-bio="Jean shorts tbh mlkshk, migas XOXO shabby chic knausgaard post-ironic marfa messenger bag craft beer adaptogen. XOXO tilde lumbersexual plaid unicorn pug, yr try-hard.">
<img src="your image url" alt="Image description 1" />
</div>
And that does it! You can edit the CSS to fit your preferred formatting of course.
