Question

我希望标题有点适合。我在这里没有错，应该在wp / se中询问？我现在搜索了两个小时，但仍然无助。

我使用blur.js来模糊图像的一部分。这样可行。但是，因为图像只是网格中的少数几个。现在，每个其他图像都会从第一个帖子中获取模糊图像。看起来像blur.js抓取图像并模糊它。所以它必须为网格中的每个帖子做到这一点。

现在它看起来像这样：

http://jsfiddle.net/SirDarki/665p2924/26/

的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   
    });

如果问题出现在这里 - 网格：

<?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 <?php get_template_part( 'grid-item', 'text-image-landscape-small' ); ?> - 网格项：

<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

我认为你应该给每个div类“teeestbg”一个唯一的id（例如基于md5（date（）+ rand（））并修改你的jquery-custom.js：

// 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
    });

如何在php循环中为网格中的每个帖子运行jquery（wordpress）

1 个答案: