Joomla Templates Club 406,261 posts

[hotsd101 Friend hotsd101Join date: March 2015Posts: 95Downloads:2Uploads:4 Thanked: 8 times in 1 posts]

#186810

for one page is having bug relating to canvas control when using CDN or another source for load gray scale images because generate on server and normal image and script is on another location place.

see example image

some discussion of this issue found here: http://stackoverflow.com/questions/9972049/cross-origin-data-in-html5-canvas

what is ja suggestion to fix this issue.

its big problem because ja onepage VERY slow template and must have CDN to be good perform,

please advise best solution to which to edit to fix.

thanks you

---

Attachments:

1. 
2. 

[hotsd101 Friend hotsd101Join date: March 2015Posts: 95Downloads:2Uploads:4 Thanked: 8 times in 1 posts]

#490144

? nothing answer for this bugs plz

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#490244

<em>@hotsd101 369292 wrote:</em><blockquote>? nothing answer for this bugs plz</blockquote>

Apologies for this late response, on this case I would need to take a closer look at your site. Please pm me url and admin access of your site. I shall check it for you.

[hotsd101 Friend hotsd101Join date: March 2015Posts: 95Downloads:2Uploads:4 Thanked: 8 times in 1 posts]

#490264

um, please read issue again.

this is not issue with my site it code problem on all site which using that template and loading image from diff sououcre like u can see there.

[hotsd101 Friend hotsd101Join date: March 2015Posts: 95Downloads:2Uploads:4 Thanked: 8 times in 1 posts]

#490583

any answer for this yet ? ?

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#490728

Hi hotsd101,

We are sorry but for current grayscale function will only work with local image.
You can disabled grayscale function if you use image from another domain.

To disable grayscale function, please open templatesja_onepagejsscript.js and comment out the block code from line 162 to 196

There is a solutions for grayscale image by css. But when we release JA Onepage, Firefox have unexpected result, so we do not use that solution. We have not test with latest Firefox version.

Here the css if you want to give it a try.

img.grayscale {
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>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

Regards

[hotsd101 Friend hotsd101Join date: March 2015Posts: 95Downloads:2Uploads:4 Thanked: 8 times in 1 posts]

#490846

thats you very much ?

where is this best place to place this code which file ?

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#490867

Hi hotsd101,

Here’s how you can use CSS grayscale.

1. Open templatesja_onepagejsscript.js
Comment out line 162 to 197

2. Open templatesja_onepagelessstyle.less

.ja-cp-image img,
.img-grayscale img,
img.img-grayscale {
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>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.ja-cp-image:hover img,
.img-grayscale:hover img,
img.img-grayscale: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%);
}

Put this css block code to the bottom of file.

3. Go to Template Manager and press Compile LESS to CSS (please backup your template first).

Hope it helps.

Regards

[Author]

Posts