Dynamic image grid gallery

Question

I want to create a project with the following image grid gallery. I try to do with the using of masonry JQuery

My code :

functions.php

wp_register_script( 'pkgd', get_template_directory_uri() .'/lib/js/vendor/masonry.pkgd.min.js');
wp_enqueue_script( 'pkgd');

header.php

<script>
jQuery(document).ready(function($){
  $("#grid").masonry({
    columnWidth: 150,
    itemSelector: ".item",
    gutter: 15
  });
});
</script>

category-36.php

<div class="container">
<div class="three columns">                         
     <div id="menu-cat">
         <?php wp_nav_menu(array('menu' => 'Print-menu'));?>
    </div>                      
    </div> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>             
    <div class="post" id="post-<?php the_ID();?>">  
        <div id="grid" class="thirteen columns">    
            <div class="item">
                <?php the_post_thumbnail(); ?>  
                <?php the_content (); ?>
            </div>
        </div>  
    </div>      
</div> 

I upload some images to category but the massory didn't load. How can fix that? Is there any jQuery script that can generate a completely dynamic grid in respect to image size?

Thanks in advanced and for any help.

Answer 1

If you visit your website and view the page source, look for that file you are trying to include, if you cant find it, then you know you have not loaded it correctly. If you can find it, check the path is correct. This way you make 100% sure it is being referenced and is accessible for your site to use where its needed and you can start trouble shooting elsewhere if needed.

In your case, it looks like you are not enqueuing your script properly from what you have shown us in your functions.php file. You need to use a hook to do this.

function royal_masonry_enqueue_scripts() {

        wp_register_script( 'pkgd', get_template_directory_uri() .'/lib/js/vendor/masonry.pkgd.min.js');
        wp_enqueue_script( 'pkgd');
    }

add_action( 'wp_enqueue_scripts', 'royal_masonry_enqueue_scripts', 11); // The hook that fires to load the enqueued script within the function

If you are using a child theme also bear in mind that get_template_directory_uri(); will give you the wrong URL, you would need to use get_stylesheet_directory_uri();