Indexhibit Support

hello.
i was wondering how to make the thumbnails in Visual index all in grayscale, and on mouse hover in colour. i searched for the similar issue in forum, but couldn't find any similar question...
thank you

Well you'll need php skills to do this.
I did a web search using "Converting Images to Grayscale using PHP and the GD Library" and got many useful answers, but they all need php skills to integrate to the system.

Thank you for fast answer. I was hoping there could be a simple solution to that, but I see I will have to upgrade my skills a bit more. :)

...on the other hand I found this: stackoverflow.com/questions/7273927/…

which would quite easy to implement in the css part of the Visual Index format.

Try something like

1. #exhibit #img-container .picture a.link img  {
2.   filter: url("data:image/svg+xml;utf8,<svg xmlns='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></…;); /* Firefox 3.5+ */
3.   filter: gray; /* IE6-9 */
4.   -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
5. }
6. #exhibit #img-container .picture a.link img :hover {
7.   filter: none;
8.   -webkit-filter: grayscale(0%);
9. }

* refer to the original posted link in case the code above doesn't appear right.

thank you for your research and help!
unfortunately, it just doesn't seem to work for FF... been checking the link you suggested, and looks like i am the only one that has the problem with it. probably i am doing something wrong... i am struggling with it the whole day, trying out different options, using little knowledge i have on php and css.
it works perfectly for chrome, though...
well, anyhow, thank you once more, i will keep you posted of my progress.

hmmm. i found many solutions similar to the above one, but none of them seems to work for me. found also this version, with the .svg file, but was not really sure where to put it (the file):

stackoverflow.com/questions/609273/…

and:

demosthenes.info/blog/532/…

right now i did something else, with background colour and opacity, to achieve similar effect, but the inability to do the grayscale is really bugging me... seems that it works for everyone, so i must be doing something wrong.
if someone has an idea what could be the problem...

my page: ostudio.hr

xikki I may have been wrong with the css selectors.

Try the solution I posted above but with these css selectors (paste this in your style.css)

1. #exhibit #img-container .picture a img {
2.   filter: url("data:image/svg+xml;utf8,<svg xmlns='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></…;); /* Firefox 3.5+ */
3.   filter: gray; /* IE6-9 */
4.   -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
5. }
6. #exhibit #img-container .picture a:hover img {
7.   filter: none;
8.   -webkit-filter: grayscale(0%);
9. }

...and refresh your page a few times - the stylesheet may have been cached in your browser.

yeah! tnx arsondpi!
everything works now- the problem was that i was putting the code in the end of format.visual_index.php, and not in style.css.
it doesn't work in IE, but i dont care about that...

Hi,

thanks for this, it works great and I was looking for something similar befor the update without any sucess...

Just wanted to know how I could inverse the effet (starting with color and turning B&W once the mouse is over)
and by the way I cant figure why my mansory effect doesn't work, I'd like to make the titles appear on the pix once the mouse is over... (help would be greattly appriciated as I'm frequently not sure of what I'm playing with)....

my website: gaspardtineberes.com

Thanks!

Hi again, one last point,
The code works perfectly fine exept that it's target the pictures so it's still active once I'm in the exhibit, is their anyway I could exclude it once your on the exi-hibit and keep it active when it's on the index???

Cheers..

Me again, sorry I didn't check before but it seems like it doesn't work ether on firefox, nor on safari, but perfectly on chrome...
( don't necessarily looking for answer their just letting people know if someone else is in the same case...)

Guys it works in all browsers. Please refer to the article in my post, above...

GaspardTB, to reverse the effect just reverse the code; put the grayscale filters on :hover, and leave everything else like it is.
As for FF- maybe you did the same mistake as i did; you should put the code in your style.css, not in visual_index.php.