Question

I’m working on a wordpress site and I want to use jQuery Masonry in one of my pages but it doesn’t work. I searched and tried many changes but no results.

Here I am:

In header.php I added this:

    <?php wp_enqueue_script("jquery"); ?>

    <?php wp_head(); ?>

<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.masonry.min.js"></script>

<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.imagesloaded.js"></script>

<script language="javascript" type="text/javascript">

var $container = $('#masonry-list');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.masonry-item', isAnimated: true
  });
});

</script>

</head>

and in template file (list-objects.php) I have this markup:

<div id="masonry-list">
    <h3> this-is-list-object-page </h3>


        <?php $loop = new WP_Query( array( 'post_type' => 'objects', 'posts_per_page' => -1 , 'orderby' => 'rand' ) ); ?>

    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?> 


    <div class="masonry-item">
        <?php the_title( '<a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a>' ); ?>

        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail(); ?>
   </a>
        <?php echo get_the_term_list( $post->ID, 'place', 'مکان قرار گیری: ', ', ', '' ); ?>
        <?php echo get_the_term_list( $post->ID, 'category', 'رده: ', ', ', '' ); ?>
    </div>



<?php endwhile; ?>
</div>

I checked that all .js files are loaded and there is non problem with addresses etc.
The page address is : http://5.144.130.63/?page_id=69

Can anybody help me with this issue?

Answer 1

You have at least two problems, possibly three:

1. Your script is running before the page is fully loaded. You need to wrap it in the jQuery document ready function (example below)

2. When using jQuery in WordPress, you need to reference it via the jQuery function – using the $ function will end up with “collisions” with other libraries.

3. It appears that you are using both the imagesLoaded and masonry plugins – are you sure there is no collission between the two, causing issues? They both aim to position images after they are loaded – I’d encourage you to remove the imagesLoaded and see if you get what you want.

Alter your script like below, and you should see it work:

<script language="javascript" type="text/javascript">  
    // This line tells the script to run after the page is loaded,
    // As well as allows you to use the `$` function within the script
    jQuery(function($) {  
        $('#masonry-list').masonry({
            itemSelector: '.masonry-item', 
            isAnimated: true
        });
    });
</script>