0

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();
}

  • Check the WordPress Codex for Using JavaScript. I think this will work if you download the script locally then use the enqueue function. – eyoung100 May 19 '14 at 16:27
  • You say I should enqueue javascript in general since thats the only linked script i use? – user2059370 May 19 '14 at 16:53
  • Yes, according to the WordPress Codex, it looks as if WordPress has trouble with remote Scripts, so download the script locally to your site then use the enqueue function. – eyoung100 May 19 '14 at 16:59
  • Ok, thanks. I enqueued the jquery in functions.php- Still have the same result though, i need to load browser twice (safari) – user2059370 May 19 '14 at 17:12
  • Actually I enqueued the jquery in the header- Still have the same result though, i need to load browser twice (safari). I put <?php wp_enqueue_script("jquery"); ?> before wp_head, and then my javascript after the wp_head. Still has to fire the browser twice. – user2059370 May 19 '14 at 17:19
1

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

  • Well, first of all I Don´t have the option to add classes to the images without adding another thumbnailsize to use with the appropiate class, which I Don´t wanna do, and also, I want it to be as compatible as possible. Tried the javascript they linked on the exampel you showed me, but I couldn't get it to work.. Not quite what I asked for either, but I appreciate the reply. – user2059370 May 19 '14 at 16:26
0

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 :-)

  • 1
    $(window).load(function() should be jQuery(window).load(function($) to work with the WordPress version of jQuery, which is in noConflict mode. – Milo May 19 '14 at 21:41
  • Thanks for the comments guys. However can´t get it to work. I first tried enqueuing the default version, and changed to non conflict mode, didnt work at all. changed to $(window).load(function() without enqueue, Didnt work. Enqued again, changed to nonconflict mode. Noting worked. – user2059370 May 19 '14 at 22:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.