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

(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.

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;

}



.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

Post reply

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

Post reply
Last edited:
01/08/13
7:16am

Fahd Murtaza says:
I am attaching a screenshot for your reference.

Post reply
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?

Post reply
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

Post reply
Last edited:
01/08/13
8:55am

Fahd Murtaza says:
The CSS I provided should be cross browser compatible. Did you try that?

Post reply
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/

Post reply
Last edited:
01/08/13
10:54pm

Fahd Murtaza says:
OK and then, change image on mouse over?

Post reply
Last edited:
01/09/13
9:56am

paul de wouters says:
I tried but now the logos aren't showing at all

Post reply
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..

Post reply
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

Post reply
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

Post reply
Last edited:
01/09/13
10:31am

paul de wouters says:
also, now the image sliding animation is really slow

Post reply
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?

Post reply
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

Post reply
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

Post reply
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

        });
```
Post reply

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.

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

$30 WPML and jQuery / Canvas security error

(17) Responses

$30
WPML and jQuery / Canvas security error