I took jQuery multilanguage logic from this site.
Because files with the .ini extension are used, script takes the value immediately after the = sign.
There is lang folder. Inside it there are 3 lang folders en, es , de. In the each folder there is lang.ini file with the keys and translations.
Sample of lang.ini file:
design=Design
interior=Interior
exterier=Exterier
Therefore, I do not know how to correctly add values for pictures in different languages.
When the script reaches to second =, it will simply stop executing and this element will not be displayed.
<img scr="img/img_1.png">
I tried to put other symbols instead of = and change them to = through the replace function, but it still does not work.
The data-lang attribute is used to display the translation value:
<div data-lang="design"></div>. The value will be inserted between the open and close tags. If there is anything inside these tags, it will be replaced with the data-lang value obtained from the lang.ini file.
My question: For example I have in my lang.ini file key house with value for English language house=img_en_1.png. data-lang returns this value. Is it possible using jQuery take this data-lang value and insert it to img after img/ <img src="img/">.
I will add a script that substitutes the translation. All other elements, see the link at the beginning.
d2s_lang.js script:
eval(function(p, a, c, k, e, d) {
e = function(c) {
return c.toString(36)
}
;
if (!''.replace(/^/, String)) {
while (c--) {
d[e(c)] = k[c] || e(c)
}
k = [function(e) {
return d[e]
}
];
e = function() {
return '\\w+'
}
;
c = 1
}
;while (c--) {
if (k[c]) {
p = p.replace(new RegExp('\\b' + e(c) + '\\b','g'), k[c])
}
}
return p
}('7 9(h,4,e){2 j=l.f.q+"/";2 k=l.f.y+"//";2 g=$(e).6("9-t");2 4=4;$.r(k+j+h+"/"+g+"/9.x",7(6){2 3=6.o("\\n");2 a={};b(3){v(2 i=0;i<3.z;i++){b(3[i]){2 8=3[i].o("=");a[8[0]]=8[1]}}}2 5=$("u").5();$.s(a,7(c,m){2 d=-1;b((d=5.p(c,d+1))!=-1){$(\'[\'+4+\' = \'+c+\']\').5(m)}w{}})})}', 36, 36, '||var|lang_data|container|html|data|function|lang_check|lang|lang_array|if|key|pos|setup|location|setup_lang|dir||lang_host|lang_protokol|window|val||split|indexOf|host|get|each|active|body|for|else|ini|protocol|length'.split('|'), 0, {}))
P.S. To switch language there is 3 buttons:
<a class="langswtch" onclick="setLang('en')"><img class="lang a" src="img/langen.png"></a>
<a class="langswtch" onclick="setLang('es')"><img class="lang" src="img/langes.png"></a>
<a class="langswtch" onclick="setLang('de')"><img class="lang r" src="img/langde.png"></a>
Also in each html file there is the script, which set language:
lang('lang','data-lang','body');
function setLang(setLang){
$('body').data('lang-active',setLang);
lang('lang','data-lang','body');
};
The default language is set using data-lang-active=en.
As a result i have the page like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="/images/NHLurl.png" type="image/x-icon">
<link rel="stylesheet" href="css/General.css">
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<script src="JS/jquery-3.5.1.min.js"></script>
<script src="JS/includes.js"></script>
<body data-lang-active="en">
<header id="header"></header>
<section class="section">
<img class="house" src="">
<div class="container">
<h1 class="maptext" data-lang="maptext"></h1>
<iframe class="googlemaps" src="..."></iframe>
</div>
</section>
<footer id="footer"></footer>
<script src="JS/d2s_lang.js"></script>
<script>
lang('lang','data-lang','body');
function setLang(setLang){
$('body').data('lang-active',setLang);
lang('lang','data-lang','body');
};
</script>
<script src="JS/script.js" async></script>
</body>
</html>
