Magnific Popup gallery problem

Hi,

I’m trying to get this gallery feature working.
I’m so far that the arrows are displayed, but clicking them doesn’t initiate going to next item.

This is my code

<script type="text/javascript">
	jQuery(document).ready(function() {
		 jQuery('.thumbnail__portfolio').magnificPopup({
		  delegate: 'a[rel^="prettyPhoto"]',
		  type: 'image',
		  mainClass: 'mfp-ready',
		  tLoading: 'Afbeelding laden #%curr%...',
		  gallery: {
			  enabled: true,
			  navigateByImgClick: true,
			  preload: [0,1],
			  arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
			  tPrev: 'Previous (Left arrow key)',
			  tNext: 'Next (Right arrow key)'
		  }
		 });
	});
	</script>

I tried document ready, noConflict, jQuery or $ but nothing works.
Anyone got a clue?

Live example at
https://typograficsonline.be/pjb/galerij