-1

I created a loop of posts from terms having a block for each term like the following:

-

Term title

Featured image of one post from that term

List of all posts for that term

-

Right now I'm using 3 terms so it's 3 blocks with that content. The idea is that when you hover the title of one of the posts from a term, the featured image changes to the one from the post hovered.

It is (kind of) working but when I hover a post title, all images change instead of just the one in the block they belong to. I think it is because I somehow need to use unique ID's instead of classes for the Jquery but I don't know how to translate the ID to the Jquery (I'm learning to code in the process of building things)

PHP Code

//Loop throug each taxonomy terms, 
    foreach ( $terms as $term ) { 
        //Query argument for post
    $args = array( 
            'post_type' => 'technology', // Or Custom Post Type, 
            'order' => 'DESC', 
            'orderby' => 'date',
            'taxonomy' => $tax,
            'term' => $term->slug, // Query posts for each term based on term slug
            'orderby' => 'date',
            'order' => 'ASC', 
        );
        $query = new WP_Query( $args ); 
        $posts = $query->get_posts();

        $cat_icon = get_term_meta( $term->term_id, 'category-icon', true );
        $cat_iconUrl = ( ( $cat_icon != '' ) ? wp_get_attachment_url( $cat_icon ) : '' );

        ?>

<div class="container-fluid tech-cat-item py-5">
    <div class="container">
    <div class="row align-items-center pb-3">
    <div class="col-1">
    <img class="img-fluid" src="<?php echo $cat_iconUrl; ?>">
</div>
<div class="col-11">
    <h3><?php echo $term->name;?></h3>
</div>
</div>
<?php
       $ga_item = array(
            'post_type' => 'technology', // Or Custom Post Type, 
            'taxonomy' => $tax,
            'term' => $term->slug, // Query posts for each term based on term slug
            'posts_per_page' => '1',
            'orderby' => 'date',
            'order' => 'ASC', 
);
       $ga_query = new WP_Query( $ga_item ); 
       $ga_posts = $query->get_posts();
    if ( $ga_query->have_posts() ) {
    while ( $ga_query->have_posts() ) {
$ga_query->the_post(); ?>
    <div class="row ga-panel py-5">
    <div class="col-12">
        <?php 
        $ga_url = get_the_post_thumbnail_url($post->ID,'full'); ?>
        <img id="<?php the_ID($post->ID); ?>" class="img-fluid ga-img" src="<?php echo esc_url($ga_url);?>">
    </div>
    </div>
<?php }
}
wp_reset_query();
?>
    <div class="row">
        <?php 
        if ( $posts ) {
         foreach ( $posts as $post ) { ?>
             <div class="col-4 ga-links py-1">
                <a id="<?php the_ID($post->ID); ?>" href="<?php the_permalink( $post->ID ); ?>" data-swap="<?php the_post_thumbnail_url($post->ID,'full'); ?>" > <?php echo $post->post_title; ?></a>
            </div>
         <?php        
            }
        }
       ?>
</div>
</div>
</div>
  <?php  }
 wp_reset_query();
?>

EDIT

I found how to use variable for the ID in the jquery, but now the jquery is only working on the first img instance. No matter what link I hover into, the image changes but at the first image....

New Jquery code:

jQuery(document).ready(function () {
jQuery('.ga-links a').hover(function(){
    var id = jQuery('.ga-img').attr("id");
        jQuery('#' + id).attr('src',this.getAttribute('data-swap'));
         console.log(id);
});
})

(any other advice on cleaning up code, or better approaches are appreciated. I'm learning and this weird query is the best approach to what I was trying to do lol)

  • Can I have the URL of the page where the code is working? – made2popular May 10 at 22:12
  • I'm working on a client site and I don't have permission to post the url publicly and I couldnt use the chat :( – Cynthia Lara May 10 at 23:01
  • Based on a temporary variable you can define 3 jquery individually so it only works for its own block. – made2popular May 11 at 10:01
  • but how? I think I've tried so hard that I'm blocked lol and the best approach would be to have just one jquery that serves the loop, what if they add another category then there would be 4 variables not 3 :( – Cynthia Lara May 11 at 13:58
  • Well, it's hard to give the exact solution without looking at the frontend URL. But as per my knowledge try to declare a temporary counter which will serve as the CSS class in each iteration and use that CSS class in your jquery to define the particular block/section. – made2popular May 11 at 18:03
3
+50

I think you could the code working, if you used the current term as the selector as there's only one featured image and multiple links for each term.

For example, first add the term to the image classes,

<img class="img-fluid ga-img ga-img-<?php echo $term->slug; ?>" src="<?php echo esc_url($ga_url);?>">

Then add the term to every post link,

<a href="<?php the_permalink( $post->ID ); ?>" data-swap="<?php the_post_thumbnail_url($post->ID,'full'); ?>" data-term="<?php echo $term->slug; ?>" >
    <?php echo $post->post_title; ?>
</a>

Now you should be able to use the term as selector in jQuery,

jQuery(document).ready(function () {

  jQuery('.ga-links a').hover(function() {
    var currentTerm = jQuery(this).data('term'),
        swapImage = jQuery(this).data("swap");
    jQuery('.ga-img-' + currentTerm).attr('src', swapImage);      
  });

});
| improve this answer | |
  • 1
    I didn't ever think of that! Brilliant! – Cynthia Lara May 15 at 15:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.