问题:我使用高级自定义字段创建了一个库。我添加到图库中的所有图像我都给出了自定义分类(类别),例如'时尚','肖像'等我在画廊上方列出了所有条款。我希望能够点击一个术语,例如时尚,以及所有带有“时尚”一词的图像加载到下面的图像容器中。与https://demo.kaliumtheme.com/photography/相似。我很难在点击一个术语时加载图像。你能帮忙吗?
以下是图库的代码:
<?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; ?>
自定义分类法称为“category_media”。我希望使用下面这样的函数:
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);
}
使用这个JQuery函数:
<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>
但是,没有图像加载到容器中。任何人都可以帮助并告诉我我失踪了吗?非常感谢,谢谢!
答案 0 :(得分:0)
你的问题不明白 尝试提供更多详细信息并缩短代码 不要让所有代码都只提供您遇到特定问题的地方