Joomla Extensions Club 20,483 posts

[giuse74 Friend giuse74Join date: August 2013Posts: 18Downloads:0Uploads:1 Thanked: 3 times in 1 posts]

#199348

I would like disable image grayscale to color in order to see images color directly.

How to do this?

Thanks.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#540897

<em>@giuse74 434816 wrote:</em><blockquote>I would like disable image grayscale to color in order to see images color directly.
How to do this?
</blockquote>
Do you want to disable it for a specific section of for the whole onepage .
Let me know i will help you solve this

[giuse74 Friend giuse74Join date: August 2013Posts: 18Downloads:0Uploads:1 Thanked: 3 times in 1 posts]

#540919

I want to disable it for the whole onepage. Thanks

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

#541165

<em>@giuse74 434883 wrote:</em><blockquote>I want to disable it for the whole onepage. Thanks</blockquote>

Please try tweak below, it should help to disable image grayscale in JA Content Popup module.

Open the templates/ja_onepage/js/script.js file,

Change:


function Grayscale(image) {
if (supportsCanvas) {
$(image).jaload(function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageData, px, length, i = 0, gray;

canvas.width = image.naturalWidth ? image.naturalWidth : image.width;
canvas.height = image.naturalHeight ? image.naturalHeight : image.height;

context.drawImage(image, 0, 0);

imageData = context.getImageData(0, 0, canvas.width, canvas.height);
px = imageData.data;
length = px.length;

for (; i < length; i += 4) {
//gray = px * .3 + px * .59 + px * .11;
//px = px = px = gray;
px = px = px = (px + px + px) / 3;
}

context.putImageData(imageData, 0, 0);
image.src = canvas.toDataURL();

$(image).css('opacity', 0).animate({opacity: 1}, 500);
});
}
}


To:

function Grayscale(image) {
var supportsCanvas = false;
if (supportsCanvas) {
$(image).jaload(function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageData, px, length, i = 0, gray;

canvas.width = image.naturalWidth ? image.naturalWidth : image.width;
canvas.height = image.naturalHeight ? image.naturalHeight : image.height;

context.drawImage(image, 0, 0);

imageData = context.getImageData(0, 0, canvas.width, canvas.height);
px = imageData.data;
length = px.length;

for (; i < length; i += 4) {
//gray = px * .3 + px * .59 + px * .11;
//px = px = px = gray;
px = px = px = (px + px + px) / 3;
}

context.putImageData(imageData, 0, 0);
image.src = canvas.toDataURL();

$(image).css('opacity', 0).animate({opacity: 1}, 500);
});
}
}

[giuse74 Friend giuse74Join date: August 2013Posts: 18Downloads:0Uploads:1 Thanked: 3 times in 1 posts]

#541201

Great! It works very well. Thank you 🙂

[Author]

Posts