Pay money and get answers for your WordPress questions (more info)

WPML and jQuery / Canvas security error

  • SOLVED

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

Answers (2)

2013-01-08

Christianto answers:

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,
[[LINK href="http://pastebin.com/HdwfXiyg"]]http://pastebin.com/HdwfXiyg[[/LINK]]


paul de wouters comments:

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


Christianto comments:

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:
[[LINK href="http://pastebin.com/jf0xGsQE"]]http://pastebin.com/jf0xGsQE[[/LINK]]

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


paul de wouters comments:

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


paul de wouters comments:

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


paul de wouters comments:

also, now the image sliding animation is really slow


Christianto comments:

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?


paul de wouters comments:

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


paul de wouters comments:

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


Christianto comments:

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.
[[LINK href="http://pastebin.com/csgX4kKf"]]http://pastebin.com/csgX4kKf[[/LINK]]

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

2013-01-08

Fahad Murtaza answers:

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


Fahad Murtaza comments:

I am attaching a screenshot for your reference.