我如何在WordPress中正确使用这个脚本?

时间:2014-05-19 作者:user2059370

Im使用javascript/html5脚本在无鼠标悬停时高亮显示黑白图像,然后在悬停时返回彩色。尽管如此,我还是需要重新加载页面2-3次才能正常工作。我不知道如何使用它,javascript也不是我的强项。由于我使用的是Google CDN API,我想我不需要将其排队?目前,我的标题中有CDN链接。php

以下是脚本:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></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();
}

2 个回复
SO网友:pdme

为什么不使用CSS?此处的跨浏览器示例:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

SO网友:Matt Royal

它第一次不工作,并且在工作之前必须重新加载页面2-3次的原因是,在运行脚本之前,必须先等待图像加载。您只是使用了错误的jQuery文档加载功能,所以请执行以下操作。。。

代替$(document).ready(function() 具有$(window).load(function()

这应该可以做到:-)

一旦你做到了这一点,最好还是将jQuery排队,但是jQuery被捆绑到WordPress核心中,所以你只需将其排队到你的主题函数文件中,如下所示:

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

add_action( \'wp_enqueue_scripts\', \'my_scripts\' );
希望能帮你解决问题:-)

结束

相关推荐

我如何将模板url传递到我的主题管理区域中的javascript?

我需要将php文件(位于主题中的文件夹中)的路径传递到管理区域中使用的JS文件,但我不知道如何实现这一点。我想做的是构建一个页面,在其中选择表单中的一些选项将通过ajax将输入值传递给php脚本。但由于JS是客户端,我不知道如何指向正确的位置。我尝试使用以下方法进行测试:<?php wp_enqueue_script( \'some_handle\' ); $translation_array = array( \'some_string\' => __( \'So