Populate an array from the loop, after which learn the array into JS

On my web site I’ve bought a {custom} submit sort. Every {custom} submit has a thumbnail of an individual, and an additional {custom} area that has one other picture in it. I’ve written code in order that when the person hovers over the thumbnail of the individual, they’ll see the choice thumbnail. That is in JS.

All the pieces is mechanically working superb, (I bought wp_enqueue_script and wp_localize_script going with some assist from right here!) however as a substitute of every individuals thumbnail seeing the right corresponding various thumbnail on hover, they had been all seeing the identical one. This was the final one which was learn into the array (they had been all being overwritten within the loop.)

My new strategy (which I do not know if its proper) is to learn the submit ID into the primary half of the array, after which the corresponding thumbnail into the second half.

This all appears to work after I echo it in PHP, however I am undecided learn how to get it into Javascript.

Assuming the postID is 23, I’ve tried simply writing alert(MyScriptParams.23); however that does not work.

I am unable to fairly get my head across the scope, what would I do if there was 100 individuals? I assume I would write a separate loop in JS to loop by all of it?
I am having issue with the hyperlink between PHP and JS…

Any assist drastically appreciated! I could also be doing one thing silly!

page-custom.php

<?php 
                $args = array( 'post_type' => 'drummers', 'orderby' => 'menu_order');  

                $your_loop = new WP_Query( $args ); 

                //FETCHES THE POSTS
                if ( $your_loop->have_posts() ) : whereas ( $your_loop->have_posts() ) : 
                $your_loop->the_post(); 

                //GETS THE POST ID FROM WP_QUERY

                $gettheid = get_the_ID();                

                    if ( has_post_thumbnail() ) {
                    the_post_thumbnail('', array( 'class' => "img-fluid animated drummers_face$post_id"));
                    } 

                    $meta = get_post_meta( $post->ID, 'drummers_fields', true );

                    $thumbnail_url = get_the_post_thumbnail_url($post->ID);


                    wp_localize_script('animated', 'MyScriptParams', 
                        $array = array(
                        $gettheid => $meta['image']
                        //'bar' => $thumbnail_url

                        ));

                //THIS ECHOS FINE
                echo $array[$gettheid];

                ?>

            <?php the_title(); ?>



            <?php the_content(); ?>



        </div><!-- END OF COLUMN-->    

<?php endwhile; endif; wp_reset_postdata(); ?>

Javascript – I’ve bought some code to point out the brand new thumbnail on hover, however I am conserving it primary and attempting to get it to only alert first

alert(MyScriptParams.23);

Replace

Have moved localize_script exterior of the loop, added in a counter that counts by the array, however nonetheless have the identical drawback.

            <?php


                $args = array( 'post_type' => 'drummers', 'orderby' => 'menu_order');  

                $counter = 0;

                $bigid = array();

                $your_loop = new WP_Query( $args ); 

                if ( $your_loop->have_posts() ) : whereas ( $your_loop->have_posts() ) : 
                $your_loop->the_post(); 


                array_push( $bigid, get_the_ID() );
            ?>

        <div class="col-md-4">

            <?php                

                if ( has_post_thumbnail() ) {
                the_post_thumbnail('', array( 'class' => "img-fluid animated drummers_face$post_id"));
                } 

                $meta = get_post_meta( $post->ID, 'drummers_fields', true );

                $thumbnail_url = get_the_post_thumbnail_url($post->ID);


             $array = array(
                    $bigid[$counter] => $meta['image']
                    //'bar' => $thumbnail_url

                    );            

            echo $bigid[$counter];

            $counter++;

            ?>


            <?php the_title(); ?>


            <?php the_content(); ?>


        </div><!-- END OF COLUMN-->    


<?php endwhile; endif; wp_reset_postdata(); ?>


    <?php    wp_localize_script('animated', 'MyScriptParams', $array);  ?>