Triggering Lightbox Gallery with Link

Hi dburton77!

Thank you for using Enfold.

Please do the following:

1.) Add this in the functions.php file:

// custom lightbox
function add_custom_script_lightbox(){
?>
<script>
(function($){
	$(document).ready(function() {
		var groups = {};
		$('.galleryItem').each(function() {
		  var id = parseInt($(this).attr('data-group'), 10);

		  if(!groups[id]) {
		    groups[id] = [];
		  }

		  groups[id].push( this );
		});

		$.each(groups, function() {

		  $(this).magnificPopup({
		      type: 'image',
		      closeOnContentClick: true,
		      closeBtnInside: false,
		      gallery: { enabled:true }
		  })

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

2.) Add this in the Quick CSS field:

.mfp-ready .mfp-figure {
    opacity: 1;
}

.galleryItemSet { 
display: none; 
}

#section-gallery .container, #section-gallery .template-page {
padding: 0;
}

3.) Create a page then insert a code or text block:

                <a class="galleryItem" href="http://dummyimage.com/600x200/000/fff.jpg" data-group="4">
                    Open gallery
                </a>
                <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="4"></a>
                <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="4"></a>
                <a class="galleryItem galleryItemSet" href="http://dummyimage.com/600x900/000/fff.jpg" data-group="4"></a>

Regards,
Ismael