Black and white thumbnails on mouse over

netisfred · 2015-10-05 19:10:41

Hello,
I have seen a lot of topics about TTG galleries but I don't find any information about this question :

Is it possible, with and in the gallery engine, to turn or show the thumbnails (automatically) in black and white, and get the color back on mouse over ?

If yes and if it must be done with php plugins, could you explain me how it works...and the code for this ? I have read some explanations about php in the tutorials, but I have to say that I have not understand how to install and use this..

Thank you very much for your answers.

F.

rod barbee · 2015-10-05 21:43:20

Not possible within Gallery.
Perhaps with phplugins and custom CSS.
CSS has a Filter property that might work for this. ( filter: grayscale(); )

https://css-tricks.com/almanac/properties/f/filter/

First thing you'll need to do is enable phplugins and custom CSS

http://ce4.theturninggate.net/docs/doku … _phplugins

http://ce4.theturninggate.net/docs/doku … custom_css

netisfred · 2015-10-05 22:01:00

Thank you for your answer !

Indeed it works with the CSS filter directly in the CSS file, and also with editing html file. But I'm afraid that doing like this, I will have to edit the CSS and the Html each time I will upload a new Image in the Gallery, no ?

Now, I have just enabled PHP plugins, uploaded and install PHP, and going to try with this.
I found a code to do it with PHP, but it works with wordpress. I assume that Php code will work in any configuration of PHP ?

Here is the code I found :
http://bavotasan.com/2011/create-black- … wordpress/

And the possibility to enable custom CSS, I didn't see that until now, I will have a look on the links you gave. Thank you !

About the code I found, do you think it could work ? I mean, once installed and the configuration done if this part is ok, if I change images, or re-upload a new gallery's template, I won't have to do this each time ?

thanks again.

rod barbee · 2015-10-05 22:59:26

that code is exclusive to WordPress so it won't work. I've been trying to find the CSS selector that will work with the thumbnails but have had no luck so far.

I thought something like this would work:

a.image-link img[id^="img"]:hover{
        filter: grayscale(100%) !important;
    }

but no luck so far. It's probably just a matter of hitting on the right selector.

Whether using CSS or jQuery, you'll still need to find the right selector.

And there may be an easier way staring me in the face, I'm just not seeing it. Perhaps someone with better css skills will come along and offer a suggestion.

rod barbee · 2015-10-05 23:10:04

Hmm. I thought I tried this earlier and found that it didn't work:

.the-grid img:hover {
       filter: grayscale(100%);
}

Must have done something wrong earlier because it does work.

check out this test gallery: http://ce4.barbeephoto.com/galleries/gallery-sidebar/

netisfred · 2015-10-06 00:13:20

Ah ok so I forget this code for wordpress so..

I tried for more than 2 hours since my last post to enable phpPlugin.
I am going mad with this, I am not even trying to do the grayscale on thumbnails at this step, but just only enable phpPlugin with CSS...

I tried : with gallery module to export with phpPlugin activate, blank path / renamed "phplugins-sample" with "phplugins" / edit phplugins file and delete "these lines"...
And uploaded the folder.
I tried the same thing with the general path for the phpPlugins (home/.../site/phplugins) / re-uploded, refresh etc...

And in any case, impossible de see the modification, the page Background do not become "red" as it is specified to do when it works...

And I am not even trying to make the thumbnails Black and white...

For the grayscale,

Earlier, I tried this code directly in the CSS, in the exported folder of the gallery.
At the very beginning of the CSS paste this code, and after editing the Html file (before activating PHP) it worked.

.grayscale img
{
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}
.grayscale img:hover
{
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}

The problem with this, if I am write, it is the update of the gallery. Because I am writing directly in the code of the exported page Html and Css. I will have always to do this at each time I update the gallery or export it.

netisfred · 2015-10-06 00:20:44

I just saw the page you posted, with the example.
It doesnt works in safari, chrome and explorer, I'm not sure for this last one.
In firefox yes, but it is the inverse. The idea is to turn all the thumbnails gray, and after, with the mouse over, it will discover the color of the image.

rod barbee · 2015-10-06 00:28:33

You shouldn't need any of that css you wrote. For one, you'd need to alter the html structure to have an image inside of something with the class of "grayscale" (which will probably break the gallery anyway)
And I believe the filter property needs a percentage rather than a number.

To enable phplugins site wide, you need to enable phplugins in any TTG plug-in. After you export, change the name of the folder to just "phplugins". Upload this folder to the root of your site.

You then need to obtain the server path to phplugins. To do this, just enter 'http://yoursite.com/phplugins/path.php' into your browser's address bar. (substituting your site's actual url for yoursite.com)
The browser will return the server path. Copy this and past it into "Server Path for phplugins..." field in CE4 Gallery and any other CE4 web engine you're using. This makes phplugins (as the custom css you'll enable) available to any gallery you publish.

The problem with this, if I am write, it is the update of the gallery. Because I am writing directly in the code of the exported page Html and Css. I will have always to do this at each time I update the gallery or export it.

if you use custom css via phplugins, you won't have to do this.

rod barbee · 2015-10-06 00:32:44

also, it would help if you posted a link to your site/gallery

netisfred · 2015-10-06 00:40:15

It is exactly my problem, break the gallery by editing the html and css of the export folder..

And for PhpPlugin, it is exactly what I tried for more than two hours now.. I really don't understand what is the problem. I checked the version of PHP on my website and it is ok.
I've renamed the phpplugins folder, get the path of the plugin folder and pasted it in the gallery template in lightroom, and uploaded the exported gallery... Nothing happened..

Yes I can give you the Url of the pages, but in private if it's possible.

rod barbee · 2015-10-06 00:44:19

Yes I can give you the Url of the pages, but in private if it's possible.

you can send via PM or email. links to the left under my name

rod barbee · 2015-10-06 00:52:27

It doesnt works in safari, chrome and explorer, I'm not sure for this last one.

I added the vendor prefixes. doesn't seem to work in Safari (Windows) and IE11 though.

.the-grid img:hover {
       -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);        
        filter: grayscale(100%);
}

Apparently, IE11 (or Edge) doesn't support CSS filters.
Not sure about Safari since I don't think Apple is supporting Safari for Windows any more and I don't have a Mac to test it with.

netisfred · 2015-10-06 01:05:28

ok.. so I will see for the compatibility... If to many doesn't work, maybe I will think about another idea..

I sent you an email with the pages and details.

netisfred · 2015-10-06 01:07:24

If I understand, and if I succeed to make the PHP work, I only have to paste the code you find into the CSS from the PHPlugin folder ?

rod barbee · 2015-10-06 01:35:08

looks like you've got your custom css working.

Yes, just copy the code above into your custom.css file (and delete the code for the red background

netisfred · 2015-10-06 01:41:03

Yes it works ! So it was just a problem with a space before the path...

I have now to understand the code you gave, because it not only change the thumbnail, but also the large image. Also have to revert the effect to be gray before mouse over.

rod barbee · 2015-10-06 01:49:24

it wasn't the space, it was an invalid character and an incorrect path to the custom.css file

I've not tested this with both Highslide and Magnific presentations. I'm not seeing the grayscale on large images in Highslide. But I'm seeing it on your images.
The css selector probably just needs some refining.

try this instead:

.brick img:hover

as the selector

(actually, the difference is due to the grid layout. Mine used the CE4 Standard layout, yours is using the Freewall Masonry layout)

netisfred · 2015-10-06 02:09:24

Perfect ! It works
Firefox ok, Safari Mac ok, and chrome ok. Will check with the others IE etc..

Many many Thanks Rod, I will now be able to finish this page, finally after one day, and begin the others

rod barbee · 2015-10-06 04:31:26

great!

Community @ The Turning Gate

#1 2015-10-05 19:10:41

Black and white thumbnails on mouse over

#2 2015-10-05 21:43:20

Re: Black and white thumbnails on mouse over

#3 2015-10-05 22:01:00

Re: Black and white thumbnails on mouse over

#4 2015-10-05 22:59:26

Re: Black and white thumbnails on mouse over

#5 2015-10-05 23:10:04

Re: Black and white thumbnails on mouse over

#6 2015-10-06 00:13:20

Re: Black and white thumbnails on mouse over

#7 2015-10-06 00:20:44

Re: Black and white thumbnails on mouse over

#8 2015-10-06 00:28:33

Re: Black and white thumbnails on mouse over

#9 2015-10-06 00:32:44

Re: Black and white thumbnails on mouse over

#10 2015-10-06 00:40:15

Re: Black and white thumbnails on mouse over

#11 2015-10-06 00:44:19

Re: Black and white thumbnails on mouse over

#12 2015-10-06 00:52:27

Re: Black and white thumbnails on mouse over

#13 2015-10-06 01:05:28

Re: Black and white thumbnails on mouse over

#14 2015-10-06 01:07:24

Re: Black and white thumbnails on mouse over

#15 2015-10-06 01:35:08

Re: Black and white thumbnails on mouse over

#16 2015-10-06 01:41:03

Re: Black and white thumbnails on mouse over

#17 2015-10-06 01:49:24

Re: Black and white thumbnails on mouse over

#18 2015-10-06 02:09:24

Re: Black and white thumbnails on mouse over

#19 2015-10-06 04:31:26

Re: Black and white thumbnails on mouse over

Board footer