Multiple Filters
Filtering multiple instances of Ajax Load More
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 |
<!-- Filter #1 --> <ul class="alm-filter-nav"> <li><a href="#" data-target="filter-1" data-repeater="template_41" data-post-type="portfolio" data-button-label="More Work">Work</a></li> <li><a href="#" data-target="filter-1" data-repeater="template_41" data-post-type="post" data-button-label="More Articles">Articles</a></li> </ul> <!-- Filter #2 --> <ul class="alm-filter-nav"> <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> <li><a href="#" data-target="filter-2" data-custom-args="" data-post-in="4716, 18940, 12202, 3112, 14506, 6558, 4137, 9713, 169781, 3263, 8946" data-button-label="Load More Add-ons">ALM Add-ons</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′