Build an AJAX Gallery Filter — a practical guide to Build an AJAX Gallery Filter themes tutorial with clear examples you can reuse in real projects.
Filter gallery items by custom taxonomies and load results dynamically using AJAX.
/* ===============================================================
Set the here code for the gallery page filter
===============================================================*/
jQuery('.clear-filter-btn').hide();
if (jQuery('.gallery-filter input:checkbox').is(":checked")) {
jQuery('#offset').val(0);
isLoaded = true;
jQueryhtml = 'html';
gallery_post_show(jQueryhtml);
if (jQuery('.gallery-filter input[type="checkbox"]:checked').length) {
jQuery('.clear-filter-btn').show();
} else {
jQuery('.clear-filter-btn').hide();
}
}
jQuery(".gallery_loadmore").on('click', function() {
jQueryhtml = 'append';
gallery_post_show(jQueryhtml);
});
jQuery('.gallery-filter input:checkbox').on('change', function() {
jQuery('#offset').val(0);
isLoaded = true;
jQueryhtml = 'html';
gallery_post_show(jQueryhtml);
if (jQuery('.gallery-filter input[type="checkbox"]:checked').length) {
jQuery('.clear-filter-btn').show();
} else {
jQuery('.clear-filter-btn').hide();
}
});
jQuery(document).on('click', '.clear-filter-btn', function() {
jQuery('.gallery-filter input[type="checkbox"]:checked').prop('checked', false);
jQuery('#offset').val(0);
jQueryhtml = 'html';
isLoaded = true;
gallery_post_show(jQueryhtml);
jQuery('.clear-filter-btn').hide();
})
