Using a jQuery plugin inside WordPress

Question

I am trying to use the jQuery Responsive animated grid plugin inside WordPress http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/

While testing I made the plugin work in an HTML version of the website with (I condensed the code to the relevant bits):

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.gridrotator.js"></script>
    <script type="text/javascript"> 
        $(function() {

            $( '#ri-grid' ).gridrotator( {
                rows : 2,
                columns : 7,
                step            : 'random',
                maxStep         : 3
            } );

        });
    </script>

However, this didn't work in WordPress so after some trial and error I arrived at:

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

  <script type="text/javascript">   

         jQuery(function($) {

            $( '#ri-grid' ).gridrotator( {
                rows : 2,
                columns : 7
            } );

        });
    </script> 

With the second version the plugin works however seems to have errors playing the animation and instead looks very "jagged" with images appearing without any transitions. I am guessing I am doing something wrong here but what? Is it because I am not loading the version of jQuery the plugin was designed for?

Answer 1

Your main issue is that you are including your script files incorrectly for Wordpress which could be causing conflicts with scripts included by your theme or other plugins.

Firstly you'll want to put the snippet you're using to initalise gridRotator into it's own file. So create a new file in your /js/ directory and call it 'jquery.gridrotator.init.js' then copy and paste your code into that file...

jQuery(function($) {
    $( '#ri-grid' ).gridrotator( {
        rows : 2,
        columns : 7
    });
});

then remove all the code you've written in your question from your header or footer or wherever you've put it because we're going to include the scripts in your functions.php file.

Add the following lines to your functions.php file

function lukas_add_scripts() {
    wp_register_script('gridRotator', get_template_directory_uri() . '/js/jquery.gridrotator.js', 'jquery', null, true );
    wp_register_script('gridRotatorInit', get_template_directory_uri() . '/js/jquery.gridrotator.init.js', 'gridRotator', null, true );

    wp_enqueue_script('jquery');
    wp_enqueue_script('gridRotator');
    wp_enqueue_script('gridRotatorInit');
}

add_action( 'wp_enqueue_scripts', 'lukas_add_scripts' );

This will tell Wordpress to include your 3 scripts in the correct position and importantly... only if they have not already been included!!!

Hopefully that should work for you... If not you can try previewing the site in google chrome, right click on the page and click 'Inspect Element' to open up your the browser developer tools. In there click 'Console' and there will most likely be some sort of error or notification... if so let us know what the error is and it will help massively to pinpoint your issue.

Regards

Dan