Question: I have created a gallery using Advanced Custom Fields. All the images I have added into the gallery I have given a custom taxonomy (category) e.g. 'Fashion', 'Portraits' etc. I have listed all the terms above the gallery. I want to be able to click a term, e.g. Fashion, and for all the images with the term 'Fashion' to load in the image container below. Similar to https://demo.kaliumtheme.com/photography/. I am stuck with getting the images to load on the click of a term. Can you help?
Here's the code for the gallery:
<?php $images = get_field('gallery');
if( $images ): ?>
<ul><div class="image__sizer"></div>
<?php foreach( $images as $image ): $link = get_field('link', $image['ID']); ?>
<?php $terms = get_the_terms( $image['ID'], 'category_media' ); ?>
<?php if ( !empty( $terms ) ) : $term = array_shift( $terms ); ?>
<li class="<?php echo $term->term_id; ?>">
<div data-200-bottom="top: 0px;opacity:0%;" data--200-top="top:-250px;opacity:100%;" class="image__wrap">
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
<div class="image__meta">
<span><?php echo $term->name; ?> - <?php echo $image['title']; ?></span>
</div>
</div>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
The custom taxonomy is called 'category_media'. I was looking to use a function like this one below:
function prefix_load_term_posts () {
$term_id = $_POST[ 'term' ];
$args = array (
'term' => $term_id,
'posts_per_page' => -1,
'order' => 'DESC',
'tax_query' => array(
array(
'taxonomy' => 'category_media',
'field' => 'id',
'terms' => $term_id,
'operator' => 'IN'
)
)
);
global $post;
$myposts = get_posts( $args );
ob_start (); ?>
<?php foreach ($myposts as $post):
echo $images = get_field('gallery', $post->ID); ?>
<?php endforeach; ?>
<?php wp_reset_postdata();
$response = ob_get_contents();
ob_end_clean();
echo $response;
die(1);
}
with this JQuery function:
<script>
function term_ajax_get(termID) {
jQuery("a.ajax").removeClass("current");
jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
jQuery('.image-container ul li').fadeOut();
jQuery("#loading-animation").show();
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); //must echo it ?>';
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {"action": "load-filter2", term: termID },
success: function(response) {
jQuery(".image-container ul").html(response);
return false;
}
});
}
</script>
However, no images are loading into the container. Can anyone help and tell me what I'm missing? It would be much appreciated, thanks!