WPML and jQuery / Canvas security error WordPress
- 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)
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
});
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.