How do I use this javascript correct with wordpress?

Question

Im using a javascript/html5 script to highlight images black and white during no mouse hover, and then back to color on hover. It sorta works, although, I have to reload my page 2-3 times before it works correctly. I'm not sure how to use it, and javascript isn't really my strong suite. Since I'm using a Google CDN API, I guess I don´t need to enqueue it? At the moment i have the CDN link in my header.php

This is the script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

< script>

$(document).ready(function(){

        $(".attachment-full").fadeIn(500);

    // clone image
    $('.attachment-full').each(function(){
        var el = $(this);
        el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"1","opacity":"0"}).insertBefore(el).queue(function(){
            var el = $(this);
             el.parent().css({"width":this.width,"height":this.height});
            el.dequeue();
        });
        this.src = grayscale(this.src);
    });

    // Fade image 
    $('.attachment-full').mouseover(function(){
        $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
    })
    $('.img_grayscale').mouseout(function(){
        $(this).stop().animate({opacity:0}, 1000);
    });     
});

// Grayscale w canvas method
function grayscale(src){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height; 
    ctx.drawImage(imgObj, 0, 0); 
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}

Answer 1

Why not use CSS? Cross-browser example here: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

Answer 2

The reason it is not working the first time around and you have to reload the page 2-3 times before it works is because you have to wait for the images to load first before running the script. You are just using the wrong jQuery document loading function so just do this...

Replace $(document).ready(function() with $(window).load(function()

That should do the trick :-)

Once you have this working it would still be best practice to enqueue jQuery, however jQuery is bundled into the WordPress core, so all you need to do is enqueue it in your themes functions file like this:

// Enqueue WP default version of jQuery
function my_scripts() {
wp_enqueue_script('jquery');
}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

Hope that sorts you out :-)