Open image in lightbox with custom button

Hey navindesigns,
Thanks for the login, I see that you have 5 buttons, so I assume you will need 5 different popups.
First we will add the jQuery for the popup in your functions.php

function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true
	});
});
</script>
<?php }

add_action('wp_head', 'popup_inline');

Then we will add this css to your Quick CSS:

.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

Then we will add five popups to a code block element on the page, you can edit the part PLACE CONTENT ONE HERE by adding text and image shortcodes or html code:

<div id="one-popup" class="white-popup mfp-hide">
<p>PLACE CONTENT ONE HERE</p>
</div>
<div id="two-popup" class="white-popup mfp-hide">
<p>PLACE CONTENT TWO HERE</p>
</div>
<div id="three-popup" class="white-popup mfp-hide">
<p>PLACE CONTENT THREE HERE</p>
</div>
<div id="four-popup" class="white-popup mfp-hide">
<p>PLACE CONTENT FOUR HERE</p>
</div>
<div id="five-popup" class="white-popup mfp-hide">
<p>PLACE CONTENT FIVE HERE</p>
</div>

then for your buttons I added the link like this:
<a class="open-popup-link" href="#two-popup"><div class="btnFloorPlanMobile">VIEW FLOOR PLAN</div></a>
notice each link has a different anchor to open a different popup.
Now there is a little white space where the hidden code block is on the page, so I added this to the code block to hide the white space:

<style>
#after_section_1 {
	display: none !important;
}
</style>

Please clear your browser cache and check the buttons and popups.

Best regards,
Mike