How to run jquery in php loop for every post in a grid (wordpress)

Question

I hope the title kinda fits. And that I'm not wrong here and should ask in wp/se? I searched for this for two hours now and am still helpless.

I'm using blur.js to blur a part of an image. That works. But, as the image is just one of a few in a grid. Now every other image gets the blured image from the first post. Seems like blur.js grabs an image and blurs it. So it has to do that for every post in the grid.

Right now it looks like this:

functions.php:

function mtn_loadscripts() {
    wp_enqueue_script( 'mtn_jquery_implement', get_stylesheet_directory_uri().'/js/jquery-1.11.3.min.js', array( 'jquery' ), '1.0' );
    wp_enqueue_script( 'mtn_packery_grid', get_stylesheet_directory_uri().'/js/libs/packery.pkgd.js', array( 'jquery' ), '1.0' );
    wp_enqueue_script( 'mtn_packery_settings', get_stylesheet_directory_uri().'/js/packery.js', array( 'jquery' ), '1.0' );
    wp_enqueue_script( 'mtn_blur_background', get_stylesheet_directory_uri().'/js/blur.js', array( 'jquery' ), '1.0' );
    wp_enqueue_script( 'mtn_custom_script', get_stylesheet_directory_uri().'/js/jquery-custom.js', array( 'jquery' ), '1.0' );
    }
add_action('wp_enqueue_scripts', 'mtn_loadscripts');

jquery-custom.js:

// Blur.js part of grid image behind the title
// --------------------------------------------------------------------------------------------------------
    $(document).ready( function() {
    $('.wmle_inside_image').blurjs({
        source: '.teeestbg',
        radius: 2,
        overlay: 'rgba(0,0,0,0.4)'
    }); // EOF blurjs   
    });

If the problem is in here - the grid:

<?php
/*
Template Name: grid packery
*/
get_header(); ?>

    <div id="primary" class="site-content">

        <div id="content" role="main">

            <?php $the_query = new WP_Query(array(
                'posts_per_page'    => 50
            )); //Check the WP_Query docs to see how you can limit which posts to display ?>
            <?php if ( $the_query->have_posts() ) : ?>

                <div class="packery js-packery" data-packery-options='{ "gutter": ".gutter-sizer", "itemSelector": ".item" }'>                      

                    <div class="gutter-sizer"></div>

                    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
                    $termsArray = get_the_terms( $post->ID, "category" );  //Get the terms for this particular item
                    $termsString = ""; //initialize the string that will contain the terms
                        foreach ( $termsArray as $term ) { // for each term 
                            $termsString .= $term->slug.' '; //create a string that has all the slugs 
                        }
                    ?> 

                        <?php if ( !has_post_thumbnail() ) { ?>
                        <div class="<?php echo $termsString; ?>item small"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>

                        <?php } else { ?>
                        <div class="<?php echo $termsString; ?>item w3"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
                        <?php } ?>

                            <!-- get .wmle_item -->
                            <?php if ( has_post_thumbnail() AND str_word_count( strip_tags( get_the_excerpt() ) ) <= 30 ) : ?>

                                <?php get_template_part( 'grid-item', 'text-image-landscape-small' ); ?>

                            <?php else : ?>

                                <?php get_template_part( 'grid-item', 'text-image-landscape' ); ?>

                            <?php endif; ?>   

                    </div> <!-- EOF .item -->
                    <?php endwhile;  ?>
                </div> <!-- EOF .packery -->
            <?php endif; ?>

        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_footer(); ?>

php by <?php get_template_part( 'grid-item', 'text-image-landscape-small' ); ?> <?php get_template_part( 'grid-item', 'text-image-landscape-small' ); ?> - the grid item:

<div class="wmle_item state-text-image-landscape-small">

    <!-- featured image -->
    <?php if ( has_post_thumbnail() ) :?>
        <?php // USE LIGHT BOX OR POST URL in Image
        $useLightBox  =  $shortcodeData['wmlo_use_lightbox'];
        $imageLink    =  get_permalink();        
        if ($useLightBox == 'yes'):
            $largeImageSrc  = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large', false, '');
            $imageLink      = $largeImageSrc[0]; //Send image path
        endif;  
        // SET $imageLink for feature image a tag
        ?>

        <div class="wpme_image">
            <div class="wmle_inside_image">
                <!-- Title -->
                <div class="wmle_post_title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </div>
            </div><!-- EOF .wmle_inside_image -->

            <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
            <a href="<?php echo $imageLink; ?>"><div class="teeestbg" style="background-image: url('<?php echo $thumb['0'];?>')"><?php the_post_thumbnail(); ?></div></a>
        </div>
    <?php endif; ?><!-- EOF featured image -->

</div>

Answer 1

I think you should give every div with class "teeestbg" a unique id (for example based on md5(date() + rand())) and modify your jquery-custom.js like this:

 // Blur.js part of grid image behind the title // -------------------------------------------------------------------------------------------------------- $(document).ready( function() { $('.wmle_inside_image').each(function(){ $(this).blurjs({ source: '#' + $(this).parent().find('.teeestbg').attr('id'), radius: 2, overlay: 'rgba(0,0,0,0.4)' }); // EOF blurjs });