How do I change the 'next' and 'previous' tooltips that appear when I hover over the arrows on featherlight gallery?

Question

I'm using Infinityfree a Webhosting-Service with PHP, MYSQL and I've uploaded the entire featherlight folder to my website. I'm using featherlight as a lightbox and the gallery too, and I've got two questions...

So, I'm German and I want to translate the "next" tooltip that appears when I put my mouse over the right arrow to German "weiter", and the "previous" tooltip to German "zurück". I've tried to achieve that by editing the featherlight-1.7.13/release/featherlight.gallery.min.js on my filemanager and I translated every "next" to "weiter" and "previous" to "zurück", even those with a dot after the word, previous. -> zurück. and next. -> weiter.

Then I saved the file and I went back to my website to see the gallery, but everything remains the same, it still appear "next" and "previous" when I mouse over the left and right arrows. Does anyone know how I can translate those?

The other question is about the featherlight box, so how can I make the X-button a bit bigger and make the X red when hover with the mouse?

Sorry for my bad english, and thank you in advance.

Answer 1

I personally would add some javascript and css to your template - maybe it's not the cleanest solution, but it should work.

$('.featherlight-previous').prop('title', 'zurück');
$('.featherlight-next').prop('title', 'weiter');

.featherlight-close-icon.featherlight-close{
font-size: 30px;
}

.featherlight-close-icon.featherlight-close:hover{
color: red;
}