Joomla Templates Club 406,261 posts

[nzslashman Friend nzslashmanJoin date: July 2013Posts: 27Downloads:61Uploads:0 Thanks: 11 Thanked: 3 times in 1 posts]

#191713

In the instructions it says to add or remove img.greyscale to remove the fade to colour effect in the Ja Content Popup module.

It is not the right coding as it says something like ja.gotcolour and I dont want to change the opacity manually for every image from 0 to 1 to stop the transition.

How do I globally force colour for images when using the module to display category images?

Thanks,

Aaron.

[nzslashman Friend nzslashmanJoin date: July 2013Posts: 27Downloads:61Uploads:0 Thanks: 11 Thanked: 3 times in 1 posts]

#510322

How can I do this it is not very professional to have the instructions say one thing that are not related at all to the problem in the guides.

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

#510366

You can remove greyscale jacontentpopup module with my suggestion

Open templates/ja_onepage/js/script.js file

Line 166 and 187 and change it from

Grayscale(this);

to

/*Grayscale(this);*/

2 users say Thank You to Ninja Lead for this useful post

1. nzslashman
2. vsjeff

[nzslashman Friend nzslashmanJoin date: July 2013Posts: 27Downloads:61Uploads:0 Thanks: 11 Thanked: 3 times in 1 posts]

#510484

Thank you for your simple fix. I played with the timings and opacity levels also but I had no idea this script.js file was called when the template loaded. now I do thanks.

[crystalprint Friend crystalprintJoin date: June 2013Posts: 72Downloads:0Uploads:26 Thanks: 28]

#525286

Sorry to Bump this thread, but how do you reverse the effect?

As in start with color and when hover over it , it it gets the greyscale ??

kind regards

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#525607

@crystalprint,

Please open the file: /templates/ja_onepage/js/script.js, then find and edit the value in red:

$('img.img-grayscale, .img-grayscale img, .ja-cp-image img').each(function () {
$(this).wrap('<div style="display:inline-block;" class="gs-wrap"></div>')
.clone().addClass('gotcolors').css({'position': 'absolute', 'opacity': 1}).insertBefore(this);
Grayscale(this);
}).parent().hover(
function () {
$(this).find('.gotcolors').css({
left: Math.round($(this).find('.gotcolors').siblings('img').position().left),
top: $(this).find('.gotcolors').siblings('img').position().top
}).stop(true).animate({opacity: 0}, 700);
},
function () {
$(this).find('.gotcolors').stop(true).animate({opacity: 1}, 500);
}
);

Let me know how it goes.

1 user says Thank You to Nazario A for this useful post

1. crystalprint

[crystalprint Friend crystalprintJoin date: June 2013Posts: 72Downloads:0Uploads:26 Thanks: 28]

#525661

it workt perfectly !!!

thank you very much !:)

[erhan60 Friend erhan60Join date: September 2011Posts: 1Downloads:0Uploads:0]

#541787

thank you very much… great…

[Author]

Posts