logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$30
WPML and jQuery / Canvas security error

Hi

I'm trying to use a script on my multilingual site with WPML. The script is throwing an error about cross domain security, as languages have separate domains:

I want the logos in the ticker at the bottom of the home page to be grayscale and color on hover
http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

http://www.erikbijma.nl



I explained the error here:
http://stackoverflow.com/questions/14165607/cross-domain-security-error-in-jquery-script

And the WPML support team provided some help, but it's till not working after I added the suggested filters

http://wpml.org/forums/topic/spearate-domains-per-lang-scriptfont-loading-issue/

Here is the suggested code
https://gist.github.com/4482985

And here is the actual code for the logo section that scrolls continuously:
https://gist.github.com/4483006

The jQuery for the grayscale effect
https://gist.github.com/4483012

UPDATE: looking for a server side solution more performant than jQuery. If someone can update this code to not use deprecated functions
http://bavotasan.com/2011/create-black-white-thumbnail-wordpress

So I'm close to a solution using WPThumb to generate the grayscale thumbnails

UPDATE: Even though I found a better solution using WPThumb and the GD library, Christianto actually gave a correct solution to the original request so I'm happy to award him the money

This question has been answered.

paul de wouters | 01/08/13 at 6:16am Edit
Tutorial: How to assign prize money

Previous versions of this question: 01/08/13 at 6:18am | 01/08/13 at 6:19am | 01/08/13 at 6:20am | 01/09/13 at 11:19am | 01/09/13 at 11:33am | 01/09/13 at 4:42pm

(17) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    01/08/13
    6:51am
    Fahd Murtaza says:

    What if there is a simple solution that only involves CSS. Modify your CSS file i.e

    /wp-content/themes/bijma//css/jquery.bxslider.css

    on line # 24 from


    .bx-wrapper img {
    width: 100%;
    display: block;
    }


    to


    .bx-wrapper img {
    width: 100%;
    display: block;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscalerayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    }


    This will turn them greyscale. Since you want them to be in color, when you mouse - over, add this extra code to the same stylseheet i.e

    /wp-content/themes/bijma//css/jquery.bxslider.css

    The code which needs to be added is, as follows:




    .bx-wrapper img:hover{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);

    }



    I just tested it on my chrome on your live site and it works perfectly.

    Regards,
    Fahad Murtaza

  • avatar
    Last edited:
    01/09/13
    12:43am
    Christianto says:

    Hi Paul,

    cross domain security on your site is related to image src url not because wpml, but your domain vs image src domain.
    for simple, your domain is with prefix "www." while your image src without "www."

    also I get INDEX_SIZE_ERR: DOM Exception 1, on getImageData,
    so we put it inside onload event to make it work.

    try this code,
    http://pastebin.com/HdwfXiyg

  • avatar
    Last edited:
    01/08/13
    7:16am
    Fahd Murtaza says:

    I am attaching a screenshot for your reference.

    attachment image expert uploaded image

  • avatar
    Last edited:
    01/08/13
    8:16am
    paul de wouters says:

    Fahd,

    sorry, I should have mentioned I tried the CSS only approach with this:
    http://demosthenes.info/blog/540/Animating-CSS3-Image-Filters

    but it doesn't work in IE10 - do you know a solution?

  • avatar
    Last edited:
    01/08/13
    8:30am
    paul de wouters says:

    also, I noticed that CSS filters wre slowing down the animations in the carousel

  • avatar
    Last edited:
    01/08/13
    8:55am
    Fahd Murtaza says:

    The CSS I provided should be cross browser compatible. Did you try that?

  • avatar
    Last edited:
    01/08/13
    1:28pm
    paul de wouters says:

    yes I tried. In Firefox, the images don't display at all, and IE10 doesn't make them grayscale

    I'm going to try another approach with this
    http://ottopress.com/2011/customizing-wordpress-images-with-a-plugin-imagefx/

  • avatar
    Last edited:
    01/08/13
    10:54pm
    Fahd Murtaza says:

    OK and then, change image on mouse over?

  • avatar
    Last edited:
    01/09/13
    9:56am
    paul de wouters says:

    I tried but now the logos aren't showing at all

  • avatar
    Last edited:
    01/09/13
    10:17am
    Christianto says:

    I saw you've change the image src and add prefix "www.",
    then you need to edit my js code,

    change:

    newSrc = this.src.split('http://');
    grayscale('http://www.'+newSrc[1], i);

    to:
    grayscale(this.src, i);

    full code:
    http://pastebin.com/jf0xGsQE

    please try it,
    or you can pm me your ftp if you need me to work on it..

  • avatar
    Last edited:
    01/09/13
    10:25am
    paul de wouters says:

    ok, made the change but do you know why the grayscale image isn't overlaying the color one? Also the problem still exists on the .com home page
    thanks

  • avatar
    Last edited:
    01/09/13
    10:29am
    paul de wouters says:

    actually it seems to be applying the graqyscale on hover. it should be the opposite

  • avatar
    Last edited:
    01/09/13
    10:31am
    paul de wouters says:

    also, now the image sliding animation is really slow

  • avatar
    Last edited:
    01/09/13
    10:32am
    Christianto says:

    what do you mean by overlaying?
    I check on both .nl and .com it will turn to gray version of image when mouse on hover.

    do you need to reverse it, make it all color version on mouse hover and grayscale version on default state?

  • avatar
    Last edited:
    01/09/13
    10:39am
    paul de wouters says:

    yes, that's it. grayscale is default state.
    but if the animation is slowed down by this script, I'd rather a server side solution

  • avatar
    Last edited:
    01/09/13
    10:56am
    paul de wouters says:

    or if you know a javascript solution that doesn't involve canvas, let me know

  • avatar
    Last edited:
    01/09/13
    11:33am
    Christianto says:

    afaik, only this method can be use to manipulate image (html5 Pixel manipulation canvas) with javascript
    I think its slow down not because canvas but because its doing fade out/in while the carousel is moving..

    Please try this code to reverse the image color/grayscale.
    http://pastebin.com/csgX4kKf

    and you can try to define tickerHover: true, on bxSlider init code,
    so it will stop if user hover on the carousel and we can see if it still slow down.


    $('#carousel .bxslider').bxSlider({
    ticker :true,
    tickerHover: true,
    speed :45000,
    slideMargin:25,
    minSlides :5,
    maxSlides :5,
    slideWidth :100,
    pager :false,
    controls :false
    });

This question has expired.



paul de wouters voted on this question.



Current status of this question: Completed



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.