/*Single category ajax filter dropdown example, Please Subscribe Our Blog And Comment*/
<div class="vh-filter">
<label class="label-cate">Filter By Category</label>
<select class="game-select-category" data-taxonomy="game-category">
<option class="btn fil-cat" data-rel="all">All</option>
<?php $terms = get_terms('video_category');
foreach($terms as $term){
$term_name = $term->name;
$term_slug = $term->slug;
?>
<option class="btn fil-cat" data-rel="<?php echo $term_slug; ?>" value="<?php echo $term_slug; ?>"><?php echo $term_name; ?></option>
<?php } ?>
</select>
</div>
<ul id="vh-lobby-posts" class="vh-row-sm">
<?php
$args_video = array( 'post_type' => 'PostTypeName', 'posts_per_page' => -1 );
$loop_video = new WP_Query($args_video);
if ($loop_video->have_posts()) : while ($loop_video->have_posts()) : $loop_video->the_post(); ?>
<?php
$featured_img_url = get_the_post_thumbnail_url($post->ID, 'full');
$categorys = get_the_terms( $post->ID, 'video_category' );
$concats = '';
foreach ( $categorys as $cats){
$concats .= $cats->slug.' ';
}
?>
<li id="img<?php echo get_the_ID(); ?>" class="vh-item scale-anm all <?php echo $concats; ?>">
<a href="<?php the_permalink(); ?>" class="vh-thumb-link">
<div class="vh-overlay"><img src="<?php echo $featured_img_url; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" onerror="imgError(this);" onload="vhLobbyImage.imageLoaded(<?php echo get_the_ID(); ?>)">
<span class="play-now">Play Now</span>
</div>
</a>
<div class="vh-game-title"><?php the_title(); ?></div>
</li>
<?php endwhile; ?><?php endif; ?>
</ul>
<script>
jQuery(document).ready(function(){
jQuery(function() {
var selectedClass = "";
jQuery('.game-select-category').change(function(){
var selectedClass = jQuery('.game-select-category option:selected').attr('data-rel');
if(selectedClass == 'all'){
jQuery("#vh-lobby-posts li.vh-item").not("."+selectedClass).fadeOut().addClass('scale-anm');
setTimeout(function(){
jQuery("."+selectedClass).fadeIn().removeClass('scale-anm');
jQuery("#vh-lobby-posts").fadeTo(300, 1);
}, 300);
}else{
jQuery("#vh-lobby-posts li.vh-item").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function(){
jQuery("."+selectedClass).fadeIn().addClass('scale-anm');
jQuery("#vh-lobby-posts").fadeTo(300, 1);
}, 300);
}
});
});
});
</script>
-------------------------------------------------
Let me know your thoughts and questions in the comments.
Email: vyasankit2008@gmail.com
<div class="vh-filter">
<label class="label-cate">Filter By Category</label>
<select class="game-select-category" data-taxonomy="game-category">
<option class="btn fil-cat" data-rel="all">All</option>
<?php $terms = get_terms('video_category');
foreach($terms as $term){
$term_name = $term->name;
$term_slug = $term->slug;
?>
<option class="btn fil-cat" data-rel="<?php echo $term_slug; ?>" value="<?php echo $term_slug; ?>"><?php echo $term_name; ?></option>
<?php } ?>
</select>
</div>
<ul id="vh-lobby-posts" class="vh-row-sm">
<?php
$args_video = array( 'post_type' => 'PostTypeName', 'posts_per_page' => -1 );
$loop_video = new WP_Query($args_video);
if ($loop_video->have_posts()) : while ($loop_video->have_posts()) : $loop_video->the_post(); ?>
<?php
$featured_img_url = get_the_post_thumbnail_url($post->ID, 'full');
$categorys = get_the_terms( $post->ID, 'video_category' );
$concats = '';
foreach ( $categorys as $cats){
$concats .= $cats->slug.' ';
}
?>
<li id="img<?php echo get_the_ID(); ?>" class="vh-item scale-anm all <?php echo $concats; ?>">
<a href="<?php the_permalink(); ?>" class="vh-thumb-link">
<div class="vh-overlay"><img src="<?php echo $featured_img_url; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" onerror="imgError(this);" onload="vhLobbyImage.imageLoaded(<?php echo get_the_ID(); ?>)">
<span class="play-now">Play Now</span>
</div>
</a>
<div class="vh-game-title"><?php the_title(); ?></div>
</li>
<?php endwhile; ?><?php endif; ?>
</ul>
<script>
jQuery(document).ready(function(){
jQuery(function() {
var selectedClass = "";
jQuery('.game-select-category').change(function(){
var selectedClass = jQuery('.game-select-category option:selected').attr('data-rel');
if(selectedClass == 'all'){
jQuery("#vh-lobby-posts li.vh-item").not("."+selectedClass).fadeOut().addClass('scale-anm');
setTimeout(function(){
jQuery("."+selectedClass).fadeIn().removeClass('scale-anm');
jQuery("#vh-lobby-posts").fadeTo(300, 1);
}, 300);
}else{
jQuery("#vh-lobby-posts li.vh-item").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function(){
jQuery("."+selectedClass).fadeIn().addClass('scale-anm');
jQuery("#vh-lobby-posts").fadeTo(300, 1);
}, 300);
}
});
});
});
</script>
-------------------------------------------------
Let me know your thoughts and questions in the comments.
Email: vyasankit2008@gmail.com
No comments:
Post a Comment