Just a moment – i see that the gallery will show by this code each lightbox twice
so i had to thing about that a while … and because maybe not all images on the page got hidden bios – i inserted if clauses:

function button_for_biography(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () {	
	(function($) {
		$('#people').each(function(){
		var that = this;
			$('.flex_column', this).each(function(i){
				if($(this).find('.mfp-hide').length){
					$(this).find('.avia-button').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.avia_image').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.mfp-hide').attr('id','bio-'+(i+1)).addClass('white-popup');
				}
			});
		});

		$('#people .flex_column').find('.avia-button[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'mfp-fade',
			gallery: { 
				enabled:true,
			},
		});

		$('#people .flex_column').find('.avia_image[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'mfp-fade',
			gallery: { 
				enabled:true,
			},
		});

	})(jQuery);
}); 	
</script>
<?php
}
add_action( 'wp_footer', 'button_for_biography');

PS: i see on your developer page that on click the lightbox opens and the background scrolls a bit.
so i inserted on those links the class: no-scroll to hamper that

don’t know why this makes the difference ;)

see all code and example page on : https://enfold.webers-webdesign.de/sky19er/

for that fading you have to insert that mainClass:

Edit: see next posting

( PS : you can try here like Mike did in the other topic with native eventListener DOMContentLoaded – but window on load will work too )

and in additon to quick css:

.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

and if you like to have between the items on gallery mode a fading – replace white-popup rule with :

.mfp-content .white-popup {
	position: relative;
	background: #FFF;
	padding: 40px;
	width: auto;
	max-width: 800px;
	margin: 50px auto;
	-webkit-animation: .3s fadeIn both;
	animation: .3s fadeIn both;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

You don’t have the need to insert links to the images – the code above will do – but to see that there is a link on the image:

#people .avia_image[href^="#"] {
	cursor: pointer;
}
#people .avia_image[href^="#"]:hover {
  box-shadow: 0 0 10px -3px #333;
  -webkit-transform: scale(1.05); 
  transform: scale(1.05);
}

see again: https://enfold.webers-webdesign.de/sky19er/