lightbox on button click

Hey markpevans,

Yes that should be possible, could you provide us with a link to the site in question so that we can take a closer look please?

Regards,
Rikard

Hey!

What exactly would you like to display when button is clicked? If it is a content, please see – http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline-type

Regards,
Yigit

Hi,

Remove the button then replace it with a code block. Add this code:

<div class="gallery-wrap">
<div class="avia-button-wrap avia-button-left"><a href="IMAGE URL HERE" class="galleryItem avia-button  avia-icon_select-no avia-color-aqua avia-size-medium avia-position-left" data-group="3"><span class="avia_iconbox_title" >SEE SAMPLE BOXES</span></a></div>
<a class="galleryItem galleryItemSet" href="IMAGE URL HERE" data-group="3"></a>
                    <a class="galleryItem galleryItemSet" href="IMAGE URL HERE" data-group="3"></a>
                    <a class="galleryItem galleryItemSet" href="IMAGE URL HERE" data-group="3"></a></div>

Add the image url in place of the placeholders (IMAGE URL HERE). After that, 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');

And this css code in the Quick CSS field:

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

.galleryItemSet {
    display: none;
}

Best regards,
Ismael