Switch Different Languages On The Webpage - jQuery multilang

Switch Different Languages On The Webpage - jQuery multilang

Yet another jQuery plugin for multilingual websites that automatically generates links to translate your website by switching between languages without page refresh.

1. Load the necessary JavaScript files in the html document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="src/langs.min.js"></script>
<script src="src/jquery.multilang.min.js"></script>

2. Define the strings to be translated.

<div id="example">
  <h1 class="multilang" lang="es">Título</h1>
  <h1 class="multilang" lang="en">Title</h1>
  <p class="multilang" lang="es">Hola Mundo!</p>
  <p class="multilang" lang="en">Hello World!</p>
</div>

3. Call the function on the top container. Done.

$(function () {
  $('#example').multilang();
});

4. Set the initial language. Default: browser language.

$('#example').multilang({
  defaultLang: 'en'
});

5. Hide the language switcher and use URL to translate the webpage.

<div id="example">
  <p class="multilang" lang="es">Hola Mundo! <a href="?lang=en">EN Version</a></p>
  <p class="multilang" lang="en">Hello World! <a href="?lang=es">ES Version</a></p>
</div>
$('#example').multilang({
  menu: false
});

7. Customize the languages (Without the need of lang.js).

$('#example').multilang({
  languages:{
    'es':{'name':'Spanish','nativeName':'Español'},
    'en':{'name':'English','nativeName':'English'}
  }
});

8. Use images instead of language links.

$('#example').multilang({
  pixFormat:'png',
  pathToPix:'src'
});

This awesome jQuery plugin is developed by gar-cad. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 09.04.2019
  • Source