CODEWITHSUNDEEP
wordpressgrid
João
João

Reputation: 21

jQuery code optimization required for WordPress theme

I'm trying to implement a grid using jQuery just like Google images in a WordPress theme based on this page, http://old.marcofolio.net/webdesign/browser_size_aware_content_scaling.html

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
    // Detect browser resize and re-calculate
    $(window).bind("resize", calculateContent);

    // Calculate the content on load
    calculateContent();
});

/**
* Function that calculates on how the content should behave.
**/
function calculateContent( e ) {
    // Show all items in case they were hidden
    $("#content img").show();

    // Since we know the width each image takes (100px + 40px + 40px + 2px + 2px = 184px)
    // We can calculate how many rows are showed
    var imageWidth = 184;
    var contentAreaWidth = $("#content").width();
    var itemsPerRow = Math.floor(contentAreaWidth / imageWidth);

    // Retrieve the total number of images
    var totalNrOfItems = $("#content img").length;

    // Calculate how many full rows can be showed
    var fullRows = Math.floor(totalNrOfItems / itemsPerRow);

    // Calculate how many images fell off
    var itemsToHide = totalNrOfItems - fullRows * itemsPerRow;

    // Hide the images by counting backward (from the last item)
    for(var i = totalNrOfItems; i > totalNrOfItems - itemsToHide; i--) {
        // The "eq()" is zero-based, we'll need to substract one
        var remover = i - 1;
        $("#content img:eq("+remover+")").hide();
    }

    // Set debug information
    debug(itemsPerRow, itemsToHide);
}


/**
* Show debug information
**/
function debug(nritems, hidden) {
    $("#debug").html(
        "<p>Items per row: <strong>"+ nritems +"</strong>. Hidden images: <strong>"+ hidden +"</strong>.</p>"
    );
}

It is a simple function but I can not run because it gives me many errors for example: Uncaught ReferenceError: google is not defined at script.js?ver=20170412:5

How can I optimize this jQuery code to avoid the errors?

Upvotes: 0

Views: 45

Answers (1)

cabrerahector
cabrerahector

Reputation: 3948

Uncaught ReferenceError: google is not defined at script.js?ver=20170412:5

This sounds like you forgot to include/enqueue Google Loader's script on your page. If so, simply add it to your theme's function.php file - for example:

function wp2407_add_scripts() {
    // Rest of your scripts ...
    wp_enqueue_script( 'google-jsapi', 'https://www.google.com/jsapi' );     
}
add_action( 'wp_enqueue_scripts', 'wp2407_add_scripts' );

Upvotes: 1

Related Questions