Multple Filter Instances | Examples

In this example:
Ajax Load More will filter multiple instances by different content types and parameters.

Filtering by multiple instances requires each individual instance to have a unique id shortcode parameter. This unique id must then be referenced as a data-target='{unique_id}’ attribute in the filter navigation.

Note: Multiple filters is not supported with the Filters add-on.

HTML

Filtering is achieved by passing updated shortcode parameters as data attributes to the $.fn.almFilter() function.

1

2

3

4

5

6

7

8

9

10

11

<li><a href="#" data-target="filter-1" data-repeater="template_41" data-post-type="post" data-button-label="More Articles">Articles</a></li>

</ul>

<li><a href="#" data-target="filter-2" data-custom-args="post_parent:1926" data-post-in="" data-button-label="Load More Examples">ALM Examples</a></li>

</ul>

Note: When filtering multiple instances your Ajax Load More ID must start with a letter – filtering will fail when IDs begin with an integer. e.g. id=’d92716152′

JavaScript

The following code snippet should copied and placed inside your website JavaScript file.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

$(function() {

var alm_is_animating = false; // Animating flag

$('.alm-filter-nav li').eq(0).addClass('active'); // Set initial active state

// Btn Click Event

$('.alm-filter-nav li a').on('click', function(e){

e.preventDefault();

var el = $(this); // Our selected element

if(!el.hasClass('active') && !alm_is_animating){ // Check for active and !alm_is_animating

alm_is_animating = true;

el.parent().addClass('active').siblings('li').removeClass('active'); // Add active state

var data = el.data(), // Get data values from selected menu item

transition = 'fade', // 'slide' | 'fade' | null

speed = '300'; //in milliseconds

$.fn.almFilter(transition, speed, data); // Run the filter

}

});

$.fn.almFilterComplete = function(){

alm_is_animating = false; // clear animating flag

};

})(jQuery);

The following shortcode was used to create the Multiple Filters example.

Filter #1

[ajax_load_more id="filter-1" repeater="template_41" post_type="portfolio" scroll="false" posts_per_page="3" button_label="More Work" css_classes="plain-list"]

Filter #2

[ajax_load_more id="filter-2" repeater="template_41" post_type="page" orderby="menu_order" custom_args="post_parent:1926" post_in="" scroll="false" posts_per_page="3" button_label="Load More Examples" css_classes="plain-list"]

Note: When filtering multiple instances your Ajax Load More ID must start with a letter – filtering will fail when IDs begin with an integer. e.g. id=’f92716152′