Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #626936

    Hi,
    I have a sorted portfolio with All / Bathroom / Bedroom / Dining / Entrance / Exterior / Kitchen / Living
    My question is can I have the initial load of ‘All’ in a random order.
    And then when the user clicks a category eg. ‘Bedroom’ the light-box view will scroll through these category images in order and not random?
    I have been searching through the forum but can’t find a solution.

    I currently have the Portfolio Grid set to Order by: Title and Display order: Ascending Order.
    This does what I want if the user clicks on any category other than ‘All’.
    If I have it set to Random, and I click a category, then light-box view it scrolls through random photos outside the selected category which makes it confused.
    http://bdldevelopmentco.com.au/#portfolio
    (currently running a maintenance plugin so can only be view whilst logged in)

    Any help with this will be very much appreciated.
    Cheers,
    Jake

    #628179

    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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.