Portfolio Ordering

Hey jakejauhari,

Thank you for using Enfold.

The lightbox and category filter are two different scripts. This is possible but you have to disable the rest of the lightbox script for the rest of the site or modify the js > avia.js file, look for this code around line 903:

exclude			:	'.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"]',

.. replace it with:

exclude			:	'.grid-image, .noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"]',

Add this in the functions.php file:

// custom lightbox
function add_custom_script_lightbox(){
?>
<script>
(function($){
	$(document).ready(function() {
		var setDataGroup = function() {
		 $('.grid-entry').each(function() {
			  var grid  = $(this),
				  gridm = $(this).find('.grid-image'),
				  gridc = $(this).attr('class');

			  if (/bathroom_sort/.test(gridc)) {
				  gridm.attr('data-group', '1');
			  } else if (/bedroom_sort/.test(gridc)) {
				  gridm.attr('data-group', '2');
			  } else {
				  gridm.attr('data-group', '3');
			  }

			  $(gridm).removeClass('lightbox-added');
		  });
		  console.log('test1');
	 }

		var setMpopup = function() {
		var groups = {};
		$('.grid-image').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 }
		  })

		});
		console.log('test2');
	}
	setDataGroup();
	setTimeout(setMpopup(), 100);
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script_lightbox');

And the following code in the Quick CSS field:

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

This is going to group the images in the lightbox. The script above will only work for the bathroom and bedroom items but you can add more filter in this line:

 if (/bathroom_sort/.test(gridc)) {
				  gridm.attr('data-group', '1');
			  } else if (/bedroom_sort/.test(gridc)) {
				  gridm.attr('data-group', '2');
			  } else {
				  gridm.attr('data-group', '3');
			  }

Best regards,
Ismael